<template>
|
<div style="position: relative;" class="itm-map-vr" @contextmenu="showMenu($event)" ref="targetDiv"
|
:style="{
|
background: plantBoardFlag ? 'linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px' : ''
|
}"
|
>
|
<!-- v-for="(item, index) in itmmapdatas" -->
|
<!-- backgroundSize: 'cover', -->
|
<vdr :grid=[20,20] :min-width="minWidth" :min-height="minHeight" :resizable="plantBoardFlag"
|
:draggable="plantBoardFlag" v-for="(item, index) in items" :w="item.w" :h="item.h" :x="item.x" :y="item.y"
|
@dragging="onDrag" z-index="0" @resizing="onResize" :parent="true" @dragstop="onDragStop(item)"
|
@resizestop="onResizeStop(item)" @activated="onActivated(item)" @deactivated="onDeactivated(item)"
|
|
:scale-ratio="0.7"
|
|
:style="{
|
backgroundImage: `url(${item.imgSrc})`,
|
backgroundSize: 'cover',
|
backgroundPosition: 'center',
|
backgroundRepeat: 'no-repeat',
|
}"
|
|
class="itm-map-item"
|
:class="[
|
item?.s ? '' : 'd',
|
item?.n == 'r' ? 'error r' : '',
|
item?.n == 'y' ? 'error y' : '',
|
item?.areacode ? 'areacode' : '',
|
]" :key="index">
|
<div style="width:100%;height:100%;" @click="toAreaDetail(item)" @contextmenu="showElementMenu($event,item)" @mouseenter="onMouseEnter(item,$event)" @mouseleave="onMouseLeave" >
|
<div v-if="item.t" class="t" v-html="item.t" :class="[item.t_c_1, item.stand, item.t_c, item.tl]"></div>
|
<div v-if="item.s" :class="[
|
item.s ? 'itm-svg-' + item.s : '',
|
item.n == 'r' ? 'r' : '',
|
item.n == 'y' ? 'y' : '',
|
]" :style="{
|
width: item.w && item.w != '0' ? item.w + 'rem' : '',
|
height: item.h && item.h != '0' ? item.h + 'rem' : '',
|
}"></div>
|
<div v-if="false">{{ index }}</div>
|
<!-- -->
|
|
</div>
|
</vdr>
|
|
|
<div v-if="areaVisible" :style="{ top: `${areaPosition.y}px`, left: `${areaPosition.x}px` }" class="area-context-menu">
|
<div >
|
<div class="title flex">
|
<div class="dot"></div>
|
<div>{{ getMsg(hoveredItem.t) }}</div>
|
</div>
|
<div class="title flex">
|
<div class="dot"></div>
|
<div>所属区域:{{ hoveredItem.areacode }}区</div>
|
</div>
|
</div>
|
<div v-if="hoveredItem.n == 'r'" >
|
<div class="title flex">
|
<div class="dot"></div>
|
<div>{{ getMsg(hoveredItem.t) }}</div>
|
</div>
|
<div class="desc">预警情况：红色预警</div>
|
<div class="desc">详细信息：一小时后磁盘满</div>
|
</div>
|
<div v-if="hoveredItem.n == 'y'" >
|
<div class="title flex">
|
<div class="dot"></div>
|
<div>{{ getMsg(hoveredItem.t) }}</div>
|
</div>
|
<div class="desc">预警情况：黄色预警</div>
|
<div class="desc">详细信息：一小时后磁盘满</div>
|
</div>
|
</div>
|
|
<ul v-if="menuVisible" :style="{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }" class="context-menu"
|
@click="menuVisible = false">
|
<li @click="handlePlantBoard()" v-show="!plantBoardFlag">布局</li>
|
<li @click="handlePlantBoardEnd()" v-show="plantBoardFlag">布局结束</li>
|
<li @click="handleAdd()">新增</li>
|
</ul>
|
|
<!-- 子组件右键菜单 -->
|
<ul v-if="isElementMenuVisible" :style="{ top: `${elementMenuPosition.y}px`, left: `${elementMenuPosition.x}px` }"
|
class="context-menu">
|
<li @click="handleUpdate()">编辑</li>
|
<li @click="handleDel()">删除</li>
|
</ul>
|
|
<div>
|
<add-area-item ref="addAreaItem" :menuPositionx ="this.menuPosition.x" :menu-positiony="this.menuPosition.y" @update-area-list="getAreaItemList"></add-area-item>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import A27 from '@/assets/screen/screen5/svgs3d/A27.svg'
|
import AddAreaItem from "@/components/add-area-item";
|
import { itmmapdata } from "./itm-map.js";
|
import {addAreaItemInfo, deleteAreaModuleItem, getAreaItemData, updateAreaModuleItem} from "@/api/addareaitem";
|
|
|
export default {
|
components: {AddAreaItem},
|
props: {
|
no: {
|
type: Number,
|
default() {
|
return 0;
|
},
|
},
|
},
|
data() {
|
return {
|
// itmmapdatas: itmmapdata,
|
width: 0,
|
height: 0,
|
x: 0,
|
y: 0,
|
imgSrc: A27,
|
vLine: [],
|
hLine: [],
|
|
items:[
|
// {
|
// x:300,
|
// y:300,
|
// w:200,
|
// h:200,
|
// t:'',
|
// s:'',
|
// n:'',
|
// areacode:'',
|
// t_c:'',
|
// t_c_1:'',
|
// tl:'',
|
// stand:'',
|
// imgSrc:A27,
|
// },
|
// {
|
// x:0,
|
// y:0,
|
// w:200,
|
// h:200,
|
// t:'测试一区',
|
// s:'',
|
// n:'',
|
// areacode:'01',
|
// t_c:'',
|
// t_c_1:'',
|
// tl:'',
|
// stand:'',
|
// imgSrc:A27,
|
// },
|
// {
|
// x:0,
|
// y:0,
|
// w:200,
|
// h:200,
|
// t:'测试一区',
|
// s:'',
|
// n:'',
|
// areacode:'01',
|
// t_c:'',
|
// t_c_1:'',
|
// tl:'',
|
// stand:'',
|
// imgSrc:A27,
|
// },
|
// {
|
// x:120,
|
// y:120,
|
// w:200,
|
// h:200,
|
// t:'测试二区',
|
// s:'',
|
// n:'',
|
// areacode:'02',
|
// t_c:'',
|
// t_c_1:'',
|
// tl:'',
|
// stand:'',
|
// imgSrc:A27,
|
// },
|
],
|
adjustedItem: [],
|
|
isElementMenuVisible: false, // 控制菜单显示
|
elementMenuPosition: { x: 0, y: 0 }, // 菜单位置
|
|
menuVisible:false,
|
menuPosition: { x: 0, y: 0 },
|
|
minWidth:20, // 设置元素最小的宽
|
minHeight:20, // 设置元素最小的高
|
|
plantBoardFlag:false, // 是否画布局
|
|
hoveredItem:{},
|
deleteItem:{},
|
editItem:{},
|
|
areaVisible:false,
|
areaPosition: { x: 0, y: 0 },
|
mouseX:0,
|
mouseY:0,
|
|
};
|
},
|
|
mounted() {
|
document.addEventListener("click", this.hideMenu);
|
this.getAreaItemList();
|
// document.addEventListener("mousemove", (event) => {
|
// this.mouseX = event.offsetX;
|
// this.mouseY = event.offsetY;
|
// console.log(`Mouse Position: X=${this.mouseX}, Y=${this.mouseY}`);
|
// });
|
},
|
beforeUnmount() {
|
document.removeEventListener("click", this.hideMenu);
|
},
|
|
methods: {
|
// 判断当前悬停项
|
onMouseEnter(item,event) {
|
this.hoveredItem = item;
|
this.areaVisible=true;
|
this.areaPosition = { x: item.x+item.w/2, y: item.y+item.h/2 };
|
console.log(this.hoveredItem)
|
},
|
// 清除悬停项
|
onMouseLeave() {
|
this.hoveredItem = null;
|
this.areaVisible=false;
|
},
|
|
// 默认进来不可以修改
|
handlePlantBoard(){
|
this.plantBoardFlag=true
|
},
|
handlePlantBoardEnd(){
|
this.plantBoardFlag=false
|
},
|
|
onResize: function (x, y, width, height) {
|
console.log("onResize")
|
this.x = x
|
this.y = y
|
this.width = width
|
this.height = height
|
console.log(`x:${this.x},y:${this.y},w:${this.width},h:${this.height}`)
|
},
|
onDrag: function (x, y) {
|
console.log("onDrag")
|
this.x = x
|
this.y = y
|
console.log(`x:${this.x},y:${this.y}`)
|
},
|
onDragStop: async function (itemParam) {
|
console.log("停止拖拽")
|
console.log(`x:${this.x},y:${this.y}`)
|
console.log("itemParam", itemParam)
|
if(this.x !=itemParam.x && this.y !=itemParam.y && this.w !=itemParam.w && this.h !=itemParam.h){
|
itemParam.x = this.x
|
itemParam.y = this.y
|
var dto = {
|
areacode : itemParam.areacode,
|
xVal: itemParam.x,
|
yVal: itemParam.y,
|
id: itemParam.id
|
};
|
//更新元素操作
|
const re = await updateAreaModuleItem(dto);
|
if (re.isSuccess) {
|
this.$message.success("更新成功");
|
}
|
}
|
},
|
|
onResizeStop: async function (itemParam) {
|
console.log("停止resize")
|
console.log(`x:${this.x},y:${this.y},width:${this.width},height:${this.height}`)
|
console.log(itemParam)
|
// itemParam.x=this.x
|
// itemParam.y=this.y
|
itemParam.w = this.width
|
itemParam.h = this.height
|
var dto = {
|
areacode : itemParam.areacode,
|
wVal: itemParam.w,
|
hVal: itemParam.h,
|
id: itemParam.id
|
};
|
//更新元素操作
|
const re = await updateAreaModuleItem(dto);
|
if (re.isSuccess) {
|
this.$message.success("更新成功");
|
this.open = false;
|
}
|
},
|
onActivated: function (itemParam) {
|
|
console.log('元素被激活')
|
console.log(itemParam)
|
// 元素初始化
|
this.x = itemParam.x;
|
this.y = itemParam.y;
|
this.width = itemParam.w
|
this.height = itemParam.h
|
|
},
|
|
onDeactivated: function (itemParam) {
|
console.log('元素失活')
|
console.log(itemParam)
|
|
},
|
|
|
hideMenu() {
|
this.menuVisible = false;
|
},
|
showMenu(event) {
|
event.preventDefault();
|
// this.menuPosition = { x: this.mouseX, y: this.mouseY};
|
// this.menuPosition = { x: event.offsetX, y: event.offsetY};
|
this.menuPosition = { x: event.clientX, y: event.clientY };
|
this.menuVisible = true;
|
this.hideElementMenu()
|
},
|
|
|
// 显示组件右键菜单
|
showElementMenu(event, item) {
|
event.preventDefault(); // 禁用默认右键菜单
|
event.stopPropagation(); // 阻止冒泡
|
this.elementMenuPosition = { x: item.x + item.w, y: item.y };
|
this.isElementMenuVisible = true;
|
console.log("item",item);
|
this.deleteItem = item;
|
this.editItem = item;
|
|
// 点击其他地方时隐藏菜单
|
document.addEventListener("click", this.hideElementMenu);
|
this.hideMenu()
|
},
|
// 隐藏右键菜单
|
hideElementMenu() {
|
this.isElementMenuVisible = false;
|
document.removeEventListener("click", this.hideElementMenu);
|
},
|
|
// 更新操作
|
handleUpdate() {
|
//编辑操作
|
this.hideElementMenu();
|
console.log("this.editItem",this.editItem);
|
this.$refs.addAreaItem && this.$refs.addAreaItem.editConfig(this.editItem);
|
this.hideMenu();
|
},
|
// 删除操作
|
async handleDel() {
|
// 删除
|
console.log("this.deleteItem",this.deleteItem);
|
const re = await deleteAreaModuleItem(this.deleteItem.id);
|
if (re.isSuccess) {
|
this.$message.success("删除成功");
|
this.getAreaItemList();
|
}
|
this.hideElementMenu();
|
},
|
// 新增操作
|
handleAdd() {
|
this.$refs.addAreaItem && this.$refs.addAreaItem.openConfig();
|
this.hideMenu();
|
},
|
// async getAreaItemList(){
|
// debugger;
|
// const result = await getAreaItemData(); // 假设这是一个返回Promise的函数
|
// this.adjustedItem = result.data; // 将解决后的数据赋值给itemData
|
// console.log(" adjustedItem", this.adjustedItem)
|
// let items = [];
|
//
|
// Object.keys(this.adjustedItem).forEach(key => {
|
// switch (key) {
|
// case 'xVal':
|
// items.x = this.adjustedItem[key];
|
// break;
|
// case 'yVal':
|
// items.y = this.adjustedItem[key];
|
// break;
|
// case 'areacode':
|
// items.areacode = this.adjustedItem[key];
|
// break;
|
// case 'uRL':
|
// items.imgSrc = this.adjustedItem[key];
|
// break;
|
// // 添加其他需要转换的键值对
|
// default:
|
// // 如果不需要转换，直接赋值
|
// // items[key] = this.adjustedItem[key];
|
// }
|
// });
|
// this.items = items;
|
// console.log(" this.items", this.items)
|
// },
|
async getAreaItemList() {
|
const result = await getAreaItemData(); // 假设这是一个返回Promise的函数
|
this.adjustedItem = result.data; // 将解决后的数据赋值给itemData
|
console.log(" adjustedItem", this.adjustedItem);
|
let items = [];
|
this.adjustedItem.forEach((item, index) => {
|
let newItem = {};
|
if (item.xVal !== undefined) {
|
newItem.x = parseInt(item.xVal, 10);
|
}
|
if (item.yVal !== undefined) {
|
newItem.y = parseInt(item.yVal, 10);
|
}
|
if (item.areacode !== undefined) {
|
newItem.areacode = item.areacode;
|
}
|
if (item.url !== undefined) {
|
newItem.imgSrc = item.url;
|
}
|
if (item.id !== undefined) {
|
newItem.id = item.id;
|
}
|
if (item.wVal !== undefined) {
|
newItem.w = parseInt(item.wVal, 10);
|
}
|
if (item.hVal !== undefined) {
|
newItem.h = parseInt(item.hVal, 10);
|
}
|
if (item.tVal !== undefined) {
|
newItem.t = item.tVal;
|
}
|
newItem.areaBackGroudURL = item.areaBackGroudURL;
|
newItem.areaConfigNum = item.areaConfigNum;
|
newItem.moduleName = item.moduleName;
|
newItem.areaBackGroudName = item.areaBackGroudName;
|
newItem.s = '';
|
newItem.n = '';
|
newItem.t_c = '';
|
newItem.t_c_1 = '';
|
newItem.tl = '';
|
newItem.stand = '';
|
items.push(newItem);
|
});
|
|
this.items = items;
|
console.log(" this.items", this.items);
|
},
|
|
|
|
evalA(string) {
|
return eval(string);
|
},
|
getMsg(t) {
|
if (t) {
|
return t
|
.replace(" ", " ")
|
.replace(" ", " ")
|
.replace(" ", " ")
|
.replace("<br/>", " ")
|
.replace("<br/>", " ");
|
}
|
return "";
|
|
},
|
toAreaDetail(itemParam) {
|
if (itemParam?.areacode) {
|
this.$router.push({
|
path: "/area",
|
query: { code: itemParam?.areacode },
|
});
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
$width-screen1: 174.17rem;
|
$width-screen1: 214.17rem;
|
|
@import "../../common/itm_svg3d.scss";
|
|
.itm-map-vr {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
width: calc($width-screen1 - 11rem);
|
height: 88.3rem;
|
margin: 0 auto;
|
/* margin-left: calc(-9.1rem * 0.9 - 11rem*0.9 - 1rem); */
|
margin-left: 50%;
|
transform: translate(-50%, 0%);
|
zoom: 0.8;
|
display: inline-block;
|
cursor: pointer;
|
margin-top: 10rem;
|
// background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px;
|
|
|
}
|
|
.itm-map-item {
|
position: absolute;
|
min-width: 20px;
|
min-height: 20px;
|
|
.itm-svg-A41 {
|
background-size: 100% 100%;
|
}
|
|
.t {
|
position: absolute;
|
left: 50%; //起始是在body中，横向距左50%的位置
|
top: 50%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
|
transform: translate(-50%, -50%); //水平、垂直都居中,也可以写成下面的方式
|
font-size: 1.2rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #ffffff;
|
color: rgba(1, 43, 94, 1);
|
line-height: 1.4rem;
|
}
|
|
.t.w {
|
color: #ffffff;
|
}
|
|
.t.l {
|
/* left: unset; */
|
/* right: 2rem; */
|
left: 30%;
|
transform: translate(-50%, 0%);
|
}
|
|
.t.t_c_1 {
|
font-size: 2.33rem;
|
/* font-weight: 400; */
|
}
|
|
.t.stand {
|
writing-mode: vertical-rl;
|
text-orientation: mixed;
|
}
|
|
.t.t_c_2 {
|
font-size: 2.33rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #8ba7c7;
|
}
|
|
.tip-msg {
|
display: none;
|
position: absolute;
|
left: calc(50% + 5rem); //起始是在body中，横向距左50%的位置
|
top: 55%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
|
min-width: 21rem;
|
height: 9.6rem;
|
background: #f1f9ff;
|
box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77);
|
border-radius: 0.6rem;
|
z-index: 2000;
|
padding: 1.3rem;
|
|
.title {
|
font-size: 2.5rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #012b5e;
|
line-height: 3.6rem;
|
text-align: left;
|
margin-bottom: 1rem;
|
text-overflow: ellipsis;
|
/* width: 10rem; */
|
overflow: hidden;
|
word-break: break-all;
|
white-space: nowrap;
|
|
.dot {
|
width: 1.6rem;
|
height: 1.6rem;
|
min-width: 1.6rem;
|
min-height: 1.6rem;
|
/* background: #e20505; */
|
border-radius: 50%;
|
margin-top: 1rem;
|
margin-right: 0.5rem;
|
}
|
}
|
|
.desc {
|
font-size: 1.4rem;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
line-height: 2rem;
|
text-align: left;
|
margin-left: 2.1rem;
|
margin-top: 0.5rem;
|
}
|
}
|
}
|
|
.itm-map-item.d {
|
/* background-color: rgba(209, 227, 247, 1); */
|
}
|
|
.itm-map-item.error {
|
cursor: pointer;
|
|
.tip-msg {
|
/* display: unset; */
|
}
|
}
|
|
.itm-map-item.error.r::before {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
|
content: "";
|
background-color: #e2050593;
|
}
|
|
.itm-map-item.error.y::before {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
|
content: "";
|
background: rgba(236, 193, 93, 0.6);
|
}
|
|
.itm-map-item.error.r .tip-msg .title .dot {
|
background: #e20505;
|
}
|
|
.itm-map-item.error.y .tip-msg .title .dot {
|
background: rgba(236, 193, 93, 1);
|
}
|
|
.itm-map-item.error:hover {
|
.tip-msg {
|
display: unset;
|
}
|
}
|
|
.itm-map-item:hover {
|
.tip-msg {
|
display: unset;
|
}
|
}
|
|
.itm-map-item.areacode:hover::before {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
|
content: "";
|
background-color: #059ce293;
|
|
}
|
|
|
// .tip-msg {
|
// display: none;
|
// position: absolute;
|
// left: calc(50% + 5rem); //起始是在body中，横向距左50%的位置
|
// top: 55%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
|
// min-width: 21rem;
|
// height: 9.6rem;
|
// background: #f1f9ff;
|
// box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77);
|
// border-radius: 0.6rem;
|
// z-index: 2000;
|
// padding: 1.3rem;
|
|
// .title {
|
// font-size: 2.5rem;
|
// font-family: PingFangSC-Semibold, PingFang SC;
|
// font-weight: 600;
|
// color: #012b5e;
|
// line-height: 3.6rem;
|
// text-align: left;
|
// margin-bottom: 1rem;
|
// text-overflow: ellipsis;
|
// /* width: 10rem; */
|
// overflow: hidden;
|
// word-break: break-all;
|
// white-space: nowrap;
|
|
// .dot {
|
// width: 1.6rem;
|
// height: 1.6rem;
|
// min-width: 1.6rem;
|
// min-height: 1.6rem;
|
// /* background: #e20505; */
|
// border-radius: 50%;
|
// margin-top: 1rem;
|
// margin-right: 0.5rem;
|
// }
|
// }
|
|
// .desc {
|
// font-size: 1.4rem;
|
// font-family: PingFangSC-Regular, PingFang SC;
|
// font-weight: 400;
|
// color: #666666;
|
// line-height: 2rem;
|
// text-align: left;
|
// margin-left: 2.1rem;
|
// margin-top: 0.5rem;
|
// }
|
// }
|
</style>
|
|
<style>
|
.vdr {
|
touch-action: none;
|
border: none !important;
|
}
|
</style>
|
|
<style scoped>
|
.container {
|
position: relative;
|
width: 100%;
|
height: 100vh;
|
background-color: #f0f0f0;
|
}
|
|
.context-menu {
|
position: absolute;
|
/* background-color: #F1F9FF; */
|
/* border: 1px solid #ccc; */
|
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
|
list-style: none;
|
padding: 5px 0;
|
margin: 0;
|
z-index: 999;
|
min-width: 18rem;
|
height: 15.5rem;
|
background: #f1f9ff;
|
box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77);
|
border-radius: 0.6rem;
|
}
|
|
.context-menu li {
|
padding: 8px 16px;
|
cursor: pointer;
|
font-size: 2.5rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 400;
|
color: #012b5e;
|
line-height: 3.6rem;
|
text-align: left;
|
text-overflow: ellipsis;
|
/* width: 10rem; */
|
overflow: hidden;
|
word-break: break-all;
|
white-space: nowrap;
|
}
|
|
.context-menu li:hover {
|
background-color: #eee;
|
}
|
|
|
</style>
|
<style scoped>
|
.area-context-menu {
|
|
position: absolute;
|
list-style: none;
|
padding: 5px 0;
|
margin: 0;
|
z-index: 999;
|
min-width: 21rem;
|
height: 9.6rem;
|
background: #f1f9ff;
|
box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77);
|
border-radius: 0.6rem;
|
padding: 1.3rem;
|
|
.title {
|
font-size: 2.5rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #012b5e;
|
line-height: 3.6rem;
|
text-align: left;
|
margin-bottom: 1rem;
|
text-overflow: ellipsis;
|
/* width: 10rem; */
|
overflow: hidden;
|
word-break: break-all;
|
white-space: nowrap;
|
|
.dot {
|
width: 1.6rem;
|
height: 1.6rem;
|
min-width: 1.6rem;
|
min-height: 1.6rem;
|
/* background: #e20505; */
|
border-radius: 50%;
|
margin-top: 1rem;
|
margin-right: 0.5rem;
|
}
|
}
|
|
.desc {
|
font-size: 1.4rem;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
line-height: 2rem;
|
text-align: left;
|
margin-left: 2.1rem;
|
margin-top: 0.5rem;
|
}
|
|
}
|
|
|
</style>
|
