| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <div class="server-container"> |
|---|
| | | <!-- 点击设备可以前往服务器详情页看看（debug) --> |
|---|
| | | <!-- <equ-add-form ref="equAddForm" :code="code" :areas="areas" :init_device_list="device_list" @update="update_map"></equ-add-form> --> |
|---|
| | | <div class="serve-item" @click="() => { |
|---|
| | | // stopScrolling(); |
|---|
| | | //$nextTick(() => { |
|---|
| | | // hideServe = !hideServe; |
|---|
| | | //}); |
|---|
| | | } |
|---|
| | | "> |
|---|
| | | <div class="serve-img" v-if="serve_info.cabinetInfoStatic"> |
|---|
| | | <div class="each-item-container"> |
|---|
| | | <div v-for="(serve, itemindex) in serve_info.cabinetInfoStatic" @click="showServeInfo(serve)" :key="itemindex" |
|---|
| | | class="each-item" :class="[ |
|---|
| | | serve.cabinetName == serve_select.switchName |
|---|
| | | ? 'each-item-default' |
|---|
| | | : '', |
|---|
| | | ]"> |
|---|
| | | <div class="desc"> |
|---|
| | | <div class="title">{{ serve.cabinetName }}</div> |
|---|
| | | <div class="value">设备数量: {{ serve.normal }}</div> |
|---|
| | | <div class="tip-msg"> |
|---|
| | | <div class="title">{{ serve.cabinetName }}</div> |
|---|
| | | <div class="desc">正常设备：<span class="f-n">{{ serve.normal || 0 }}</span></div> |
|---|
| | | <div class="desc">黄色预警：<span class="f-y">{{ serve.waring || 0 }}</span></div> |
|---|
| | | <div class="desc">红色预警：<span class="f-r">{{ serve.exception || 0 }}</span></div> |
|---|
| | | |
|---|
| | | <!-- <div class="desc">详细信息：一小时后磁盘满</div> --> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="tj-item"> |
|---|
| | | <div class="tj-nums"> |
|---|
| | | <div class="title">{{ serve_info.cabinetName || "-" }}</div> |
|---|
| | | <div class="flex"> |
|---|
| | | <div class="equ-num-item a"> |
|---|
| | | <div class="num g">{{ serve_info.terminalCount || 0 }}</div> |
|---|
| | | <div class="desc2">正常设备</div> |
|---|
| | | </div> |
|---|
| | | <div class="equ-num-item"> |
|---|
| | | <div class="num y">{{ serve_info.seitchCount || 0 }}</div> |
|---|
| | | <div class="desc2">黄色预警</div> |
|---|
| | | </div> |
|---|
| | | <div class="equ-num-item c"> |
|---|
| | | <div class="num r">{{ serve_info.exceptionCount || 0 }}</div> |
|---|
| | | <div class="desc2">红色预警</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="tj-line" v-if="false"></div> |
|---|
| | | <div class="tj-list" v-if="false"> |
|---|
| | | <div class="service-list-arr" id="my_serve_info_list"> |
|---|
| | | <div class="service-list-arr-item" v-for="(item, index) of data_service_list" :key="index"> |
|---|
| | | <div class="time">{{ item.time }}</div> |
|---|
| | | <div class="flex1 service-list-arr-item_content" v-html="item.desc"></div> |
|---|
| | | <div class="dot" :class="item.status"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <el-dialog append-to-body :modal="false" |
|---|
| | | :visible.sync="dialog_activateSwitchPorts" title="交换机端口情况" class="dialog_activateSwitchPorts"> |
|---|
| | | <div v-for="(infos, index2) of activateSwitchPorts" :key="index2" class="port-items"> |
|---|
| | | <div class="port-item" v-for="(item, index) of infos" :key="index"> |
|---|
| | | <div :key="index" class="space-text" :class="[ |
|---|
| | | (item.info && item.info.statusInt == 2) || |
|---|
| | | (item.info && item.info.statusInt == 3) || |
|---|
| | | (item.info && item.info.statusInt == 4) |
|---|
| | | ? 'space-text-red' |
|---|
| | | : '', |
|---|
| | | item.info && item.info.statusInt == 1 ? 'space-text-yellow' : '', |
|---|
| | | ]" v-if="item.info"> |
|---|
| | | {{ item.info.networkPort || "-" }} |
|---|
| | | </div> |
|---|
| | | <div class="port-tip">{{ item.index }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- 全部的信息 --> |
|---|
| | | <el-table |
|---|
| | | :data="switchAllDetialInfos" |
|---|
| | | border |
|---|
| | | style="width: 100%;max-height: 650px;overflow-y: scroll;"> |
|---|
| | | <el-table-column |
|---|
| | | prop="deviceName" |
|---|
| | | label="device name"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="deviceNameDNS" |
|---|
| | | label="DNS"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="ipAddress" |
|---|
| | | label="ip address"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | width="180" |
|---|
| | | prop="macAddress" |
|---|
| | | label="mac address"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="nasPort" |
|---|
| | | label="nas port"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="switchType" |
|---|
| | | label="switch type"> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | |
|---|
| | | </el-dialog> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | |
|---|
| | | |
|---|
| | | import equAddForm from "@/components/equ-add-form.vue"; |
|---|
| | | import { |
|---|
| | | getAreaServeInfo, |
|---|
| | | getFaultInfo, |
|---|
| | | getDeviceList, |
|---|
| | | updateDevicePosition, |
|---|
| | | getBridgeInfos, |
|---|
| | | delport, |
|---|
| | | statusPort, |
|---|
| | | } from "@/api/area"; |
|---|
| | | import {getAreaTjData} from "@/api/area"; |
|---|
| | | |
|---|
| | | |
|---|
| | | import Bridge from "@/components/bridge.vue"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | |
|---|
| | | components: {equAddForm}, |
|---|
| | | props: { |
|---|
| | | serve_info: {}, |
|---|
| | | serve_select:{}, |
|---|
| | | code:"", |
|---|
| | | }, |
|---|
| | | //根据 |
|---|
| | | //后端存储的是世界坐标，初次时候也是世界坐标，最小单位为0.01吧，这个间距或者大小，不考虑实际像素 |
|---|
| | | //渲染时候，需要把 坐标，变为实际rem等像素坐标 |
|---|
| | | //每个厂房大小不一样，先用一定的数代表吧. |
|---|
| | | |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | dialog_activateSwitchPorts: false, |
|---|
| | | activateSwitchPorts:{}, |
|---|
| | | switchAllDetialInfos:[], |
|---|
| | | // serve_info: {}, |
|---|
| | | |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | console.log("serve_infoserve_infoserve_infoserve_info") |
|---|
| | | console.log("this.serve_info:",this.serve_info) |
|---|
| | | console.log("this.serve_select:",this.serve_select) |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | destroyed() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | async showServeInfo(info) { |
|---|
| | | debugger; |
|---|
| | | //展示交换机全部端口 |
|---|
| | | console.log("showServeInfo", info); |
|---|
| | | //弹出框展示全部端口，并且每个端口的情况 |
|---|
| | | //获取一下信息 |
|---|
| | | this.$modal.loading("加载中"); |
|---|
| | | const res = await getDeviceList(this.code, info.cabinetName); |
|---|
| | | this.$modal.closeLoading(); |
|---|
| | | console.log("serveinfo", res); |
|---|
| | | // this.activateSwitchPorts = res.switchDetialInfos || []; |
|---|
| | | this.activateSwitchPorts = {}; |
|---|
| | | //分两行，每行24个 |
|---|
| | | this.switchAllDetialInfos = res.switchAllDetialInfos || [] |
|---|
| | | var activaePorts = {}; |
|---|
| | | if (res.switchDetialInfos) { |
|---|
| | | for (var item of res.switchDetialInfos) { |
|---|
| | | if (item.port) activaePorts[item.port] = item; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | console.log("activaePorts", activaePorts); |
|---|
| | | for (var i = 0; i <= 47; i++) { |
|---|
| | | var level = "" + parseInt(i / 24); |
|---|
| | | if (!this.activateSwitchPorts["" + level]) { |
|---|
| | | this.activateSwitchPorts["" + level] = []; |
|---|
| | | } |
|---|
| | | this.activateSwitchPorts["" + level].push({ |
|---|
| | | index: "" + (i + 1), |
|---|
| | | name: "", |
|---|
| | | info: activaePorts["" + (i + 1)] || undefined, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // console.log("this.activateSwitchPorts", this.activateSwitchPorts); |
|---|
| | | this.dialog_activateSwitchPorts = true; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../common/itm_svg.scss"; |
|---|
| | | @import "../../common/area-bg.scss"; |
|---|
| | | $width-screen1: 174.17rem; |
|---|
| | | |
|---|
| | | .server-container { |
|---|
| | | |
|---|
| | | margin: 0 auto; |
|---|
| | | margin-bottom: 5rem; |
|---|
| | | |
|---|
| | | .equipments-container { |
|---|
| | | background: #d3e3f3; |
|---|
| | | position: relative; |
|---|
| | | margin: 0 auto; |
|---|
| | | cursor: pointer; |
|---|
| | | max-width: 100%; |
|---|
| | | max-height: 100vh; |
|---|
| | | |
|---|
| | | .equipment-item { |
|---|
| | | cursor: pointer; |
|---|
| | | position: absolute; |
|---|
| | | width: 5rem; |
|---|
| | | height: 5rem; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2)); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .serve-item { |
|---|
| | | margin: 0 auto; |
|---|
| | | display: flex; |
|---|
| | | width: fit-content; |
|---|
| | | cursor: pointer; |
|---|
| | | |
|---|
| | | .serve-img { |
|---|
| | | margin-right: 2rem; |
|---|
| | | background-image: url("../../assets/equipment/serve.svg"); |
|---|
| | | background-image: url("../../assets/equipment/serve_v2.png"); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | width: 30.3rem; |
|---|
| | | height: 62.3rem; |
|---|
| | | |
|---|
| | | /* padding-left: 1rem; */ |
|---|
| | | .each-item-container { |
|---|
| | | margin-top: 21rem; |
|---|
| | | margin-left: 3rem; |
|---|
| | | |
|---|
| | | .each-item { |
|---|
| | | background-image: url("../../assets/equipment/serve_item.png"); |
|---|
| | | width: 18.9rem; |
|---|
| | | height: 4.8rem; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | margin-bottom: 0.9rem; |
|---|
| | | color: #265696; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | .desc { |
|---|
| | | text-align: left; |
|---|
| | | padding-left: 1rem; |
|---|
| | | padding-top: 0.5rem; |
|---|
| | | |
|---|
| | | .title { |
|---|
| | | font-weight: 600; |
|---|
| | | margin-bottom: 0.8rem; |
|---|
| | | /* */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .value { |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .each-item:hover::before { |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | |
|---|
| | | content: ""; |
|---|
| | | background-color: #059ce293; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .each-item-default::before { |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | |
|---|
| | | content: ""; |
|---|
| | | // background-color: #4bb6e854; |
|---|
| | | background-color:rgb(4 255 246 / 41%); |
|---|
| | | } |
|---|
| | | .tip-msg { |
|---|
| | | display: none; |
|---|
| | | position: absolute; |
|---|
| | | left: calc(50% + 5rem); //起始是在body中，横向距左50%的位置 |
|---|
| | | top: 55%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位 |
|---|
| | | min-width: 21rem; |
|---|
| | | height: 13.6rem; |
|---|
| | | background: #f1f9ff; |
|---|
| | | box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77); |
|---|
| | | border-radius: 0.6rem; |
|---|
| | | z-index: 2; |
|---|
| | | 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.8rem; |
|---|
| | | 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; |
|---|
| | | |
|---|
| | | .f-n { |
|---|
| | | color: #0dbe79; |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .f-r { |
|---|
| | | color: #e10808; |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .f-y { |
|---|
| | | color: #ffc310; |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .each-item:hover .tip-msg { |
|---|
| | | display: unset; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tj-item { |
|---|
| | | margin-left: 2rem; |
|---|
| | | width: 33.5rem; |
|---|
| | | min-height: 47.5rem; |
|---|
| | | min-height: 17.5rem; |
|---|
| | | height: fit-content; |
|---|
| | | background: #f2f8fd; |
|---|
| | | box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(198, 212, 228, 0.38), |
|---|
| | | inset 0rem 0.2rem 0.3rem 0rem rgba(255, 255, 255, 0.5); |
|---|
| | | border-radius: 1rem; |
|---|
| | | |
|---|
| | | .tj-nums { |
|---|
| | | padding: 1.8rem; |
|---|
| | | |
|---|
| | | .title { |
|---|
| | | font-size: 2.5rem; |
|---|
| | | font-family: PingFangSC-Semibold, PingFang SC; |
|---|
| | | font-weight: 600; |
|---|
| | | color: #265696; |
|---|
| | | line-height: 3.6rem; |
|---|
| | | text-align: left; |
|---|
| | | margin-bottom: 1.8rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .equ-num-item { |
|---|
| | | margin: 0 auto; |
|---|
| | | text-align: center; |
|---|
| | | |
|---|
| | | .desc2 { |
|---|
| | | font-size: 1.6rem; |
|---|
| | | font-family: PingFangSC-Medium, PingFang SC; |
|---|
| | | font-weight: 500; |
|---|
| | | color: #235884; |
|---|
| | | line-height: 2.2rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .num { |
|---|
| | | font-size: 2.4rem; |
|---|
| | | font-family: Impact; |
|---|
| | | line-height: 2.9rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .num.g { |
|---|
| | | color: #0dbe79; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .num.y { |
|---|
| | | color: #ffc310; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .num.r { |
|---|
| | | color: #e10808; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .equ-num-item.a { |
|---|
| | | margin-left: 0; |
|---|
| | | margin-right: auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .equ-num-item.c { |
|---|
| | | margin-right: 0; |
|---|
| | | margin-left: auto; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tj-list { |
|---|
| | | padding: 2.2rem; |
|---|
| | | padding-top: 1.4rem; |
|---|
| | | |
|---|
| | | .service-list-arr { |
|---|
| | | background-color: #f2f8fd; |
|---|
| | | overflow: hidden; |
|---|
| | | height: 30.3rem; |
|---|
| | | |
|---|
| | | .service-list-arr-item { |
|---|
| | | width: 100%; |
|---|
| | | min-height: 3rem; |
|---|
| | | /* margin-top: 2.2rem; */ |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | height: fit-content; |
|---|
| | | |
|---|
| | | .time { |
|---|
| | | font-size: 1.2rem; |
|---|
| | | font-family: PingFangSC-Medium, PingFang SC; |
|---|
| | | font-weight: 500; |
|---|
| | | color: #a1b6c8; |
|---|
| | | line-height: 1.7rem; |
|---|
| | | margin-right: 1rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .service-list-arr-item_content { |
|---|
| | | font-family: PingFangSC-Medium, PingFang SC; |
|---|
| | | color: #235884; |
|---|
| | | line-height: 1.17rem; |
|---|
| | | text-align: left; |
|---|
| | | margin-left: 0.4rem; |
|---|
| | | margin-right: 1.5rem; |
|---|
| | | padding-top: 1rem; |
|---|
| | | |
|---|
| | | font-size: 1.4rem; |
|---|
| | | font-weight: 500; |
|---|
| | | line-height: 1.4rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dot { |
|---|
| | | width: 0.58rem; |
|---|
| | | height: 0.58rem; |
|---|
| | | border-radius: 50%; |
|---|
| | | margin-top: 0.8rem; |
|---|
| | | margin-left: auto; |
|---|
| | | margin-right: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dot.red { |
|---|
| | | background: #c10b0b; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dot.yellow { |
|---|
| | | background: #fda928; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dot.green { |
|---|
| | | background: #17a537; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tj-line { |
|---|
| | | width: 30.1rem; |
|---|
| | | height: 0.1rem; |
|---|
| | | border: 0.1rem solid #ccdeec; |
|---|
| | | margin: 0 auto; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .chart-open { |
|---|
| | | width: 6.1rem; |
|---|
| | | height: 7.5rem; |
|---|
| | | background: #e9f4fd; |
|---|
| | | box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(198, 212, 228, 0.83), |
|---|
| | | inset 0rem 0.2rem 0.3rem 0rem rgba(255, 255, 255, 0.5); |
|---|
| | | border-radius: 1rem; |
|---|
| | | position: fixed; |
|---|
| | | right: 3rem; |
|---|
| | | top: 50%; |
|---|
| | | transform: translate(0%, 50%); |
|---|
| | | cursor: pointer; |
|---|
| | | |
|---|
| | | .img-button { |
|---|
| | | background-size: 100% 100%; |
|---|
| | | background-image: url("../../assets/area/chart-open.svg"); |
|---|
| | | width: 2.6rem; |
|---|
| | | height: 2.6rem; |
|---|
| | | transform: translate(-50%, -50%); |
|---|
| | | left: 50%; |
|---|
| | | top: 50%; |
|---|
| | | position: absolute; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | <!-- 交换机的端口 --> |
|---|
| | | <style scoped lang="scss"> |
|---|
| | | .port-items { |
|---|
| | | display: flex; |
|---|
| | | margin-bottom: 8rem; |
|---|
| | | /* height: 2rem; */ |
|---|
| | | width: fit-content; |
|---|
| | | |
|---|
| | | .port-item { |
|---|
| | | background: #e9f4fd; |
|---|
| | | border-top: 5px solid #e9f4fd; |
|---|
| | | flex: 1; |
|---|
| | | margin: 0 auto; |
|---|
| | | min-width: 6rem; |
|---|
| | | max-width: 6rem; |
|---|
| | | /* max-width: 6rem; */ |
|---|
| | | height: 1.6rem; |
|---|
| | | // background: #fff; |
|---|
| | | // box-shadow: 0rem -2rem 2.1rem 0rem #fff; |
|---|
| | | background-image: url("../../assets/area/space.svg"); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | .port-tip { |
|---|
| | | position: absolute; |
|---|
| | | bottom: -2.5rem; |
|---|
| | | height: 2.5rem; |
|---|
| | | font-size: 1.8rem; |
|---|
| | | font-family: PingFangSC-Semibold, PingFang SC; |
|---|
| | | font-weight: 600; |
|---|
| | | color: #265696; |
|---|
| | | line-height: 2.5rem; |
|---|
| | | text-align: center; |
|---|
| | | /* margin-bottom: 0.5rem; */ |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .space-text { |
|---|
| | | background-image: url("../../assets/area/space-text.svg"); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | min-width: 6rem; |
|---|
| | | min-height: 2.5rem; |
|---|
| | | transform: translate(-50%, 0%); |
|---|
| | | left: 50%; |
|---|
| | | padding-top: 0.5rem; |
|---|
| | | top: -2.5rem; |
|---|
| | | position: absolute; |
|---|
| | | /* line-height: 100%; */ |
|---|
| | | /* font-size: 12px; */ |
|---|
| | | /* span { */ |
|---|
| | | word-break: break-all; |
|---|
| | | word-wrap: break-word; |
|---|
| | | /*但在有些场景中，还需要加上下面这行代码*/ |
|---|
| | | white-space: normal; |
|---|
| | | overflow-wrap: anywhere; |
|---|
| | | /* } */ |
|---|
| | | |
|---|
| | | font-size: 1rem; |
|---|
| | | font-family: PingFangSC-Semibold, PingFang SC; |
|---|
| | | font-weight: 600; |
|---|
| | | color: #3299ff; |
|---|
| | | z-index: 20; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .space-text-yellow { |
|---|
| | | color: #e8be19; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .space-text-red { |
|---|
| | | color: #e20909; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .port-item:nth-child(6n) { |
|---|
| | | margin-right: 3rem; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .port-items:nth-child(2n) { |
|---|
| | | margin-bottom: 8rem; |
|---|
| | | } |
|---|
| | | </style> |
|---|
