This commit is contained in:
gtz 2022-11-16 17:05:35 +08:00
parent adc9c35963
commit ff4e76f843
13 changed files with 204 additions and 169 deletions

View File

@ -0,0 +1,6 @@
@font-face {
font-family: 'zcoolqingkehuangyouti-Regular'; //重命名字体名
src: url('./zcoolqingkehuangyouti-Regular.ttf'); //引入字体
font-weight: normal;
font-style: normal;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -77,12 +77,12 @@ export default {
width: 100%; width: 100%;
background-color: rgba($color: #061027, $alpha: 0.15); background-color: rgba($color: #061027, $alpha: 0.15);
position: relative; position: relative;
border: 2px solid; border: calc(2px * var(--beilv)) solid;
box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15); box-shadow: inset 0px 0px calc(20px * var(--beilv)) 0px rgba(255,255,255,0.15);
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2; border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
.line { .line {
position: absolute; position: absolute;
border-top: 4px solid #52FFF1; border-top: calc(4px * var(--beilv)) solid #52FFF1;
width: 2em; width: 2em;
top: -.25em; top: -.25em;
left: -.25em; left: -.25em;

View File

@ -142,6 +142,9 @@ export default {
.visual-base-table-container { .visual-base-table-container {
.el-table { .el-table {
border: 0; border: 0;
.cell {
line-height: calc(23px * var(--beilv));
}
} }
.el-table::before,.el-table--border::after { .el-table::before,.el-table--border::after {
background-color: transparent; background-color: transparent;

View File

@ -22,6 +22,7 @@ import router from './router'
import i18n from './lang' // internationalization import i18n from './lang' // internationalization
import './icons' // icon import './icons' // icon
import './utils/error-log' // error log import './utils/error-log' // error log
import './assets/fonts/font.scss'
import * as filters from './filters' // global filters import * as filters from './filters' // global filters
/** /**

View File

@ -1,5 +1,5 @@
<template> <template>
<svg-icon :icon-class="injectData.status === 1 ? 'signal' : injectData.status === 2 ? 'signal-warning' : 'signal-error'" style="font-size: 24px" /> <svg-icon class="icon-font" :icon-class="injectData.status === 1 ? 'signal' : injectData.status === 2 ? 'signal-warning' : 'signal-error'" />
</template> </template>
<script> <script>
@ -16,4 +16,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.icon-font {
font-size: calc(20px * var(--beilv));
}
</style> </style>

View File

@ -6,7 +6,7 @@
</span> </span>
<span class="navbar-title"> <span class="navbar-title">
<img :src="require(`../assets/img/choicepart/icon.png`)" class="navbar-title-icon" alt=""> <img :src="require(`../assets/img/choicepart/icon.png`)" class="navbar-title-icon" alt="">
肥新能源数字工厂数据采集平台
</span> </span>
<span class="navbar-right"> <span class="navbar-right">
<span> <span>
@ -18,118 +18,62 @@
<el-row class="container-main"> <el-row class="container-main">
<el-row :style="{ padding: '0 ' + 25 * beilv + 'px' }"> <el-row :style="{ padding: '0 ' + 25 * beilv + 'px' }">
<el-col :span="24"> <el-col :span="24">
<base-container class="swiper-container" :beilv="beilv" :height="303"> <base-container class="swiper-container" :beilv="beilv" :height="298">
<el-carousel ref="swiper1item" :height="303 * beilv - 4 + 'px'" :autoplay="false" arrow="never" indicator-position="none"> <div class="swiper-title">
<el-carousel-item v-for="item in 4" :key="item"> <span style="">产线A</span>
<img :style="{width: '90%', margin: 'auto 5%', marginTop: 87 * beilv + 'px'}" :src="require('../assets/img/choicepart/factory-model.png')" alt="">
<svg-icon
v-for="(i, index) in wuliuList"
:key="index + '1'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
/>
<svg-icon
v-for="(i, index) in wuliuList"
:key="index + '2'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + 22 + '%' }"
/>
</el-carousel-item>
</el-carousel>
<div class="swiper-indicator">
<svg-icon class="item-icon swiper-icon-left" icon-class="jiantou" @click="handleSwiperOneLeft" />
<svg-icon class="item-icon swiper-icon-right" icon-class="jiantou" @click="handleSwiperOneRight" />
<el-carousel ref="swiper1text" class="swiper-indicator-item" height="24px" :autoplay="false" arrow="never" indicator-position="none">
<el-carousel-item v-for="item in 4" :key="item">
<p class="swiper-indicator-text" :title="'这是第' + item + '段文本'">这是第{{ item }}段文本</p>
</el-carousel-item>
</el-carousel>
</div> </div>
<img :style="{width: '90%',height: 191 * beilv - 4 + 'px', margin: 'auto 5%'}" :src="require('../assets/img/choicepart/factory-model-A.png')" alt="">
<svg-icon
v-for="(i, index) in AList"
:key="index + '1'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: 22 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
/>
</base-container> </base-container>
</el-col> </el-col>
</el-row> </el-row>
<el-row :style="{ padding: '0 ' + 25 * beilv + 'px', marginTop: '17px' }"> <el-row :style="{ padding: '0 ' + 25 * beilv + 'px', marginTop: 17 * beilv + 'px' }">
<el-col :span="24"> <el-col :span="24">
<base-container class="swiper-container" :beilv="beilv" :height="303"> <base-container class="swiper-container" :beilv="beilv" :height="298">
<el-carousel ref="swiper2item" :height="303 * beilv - 4 + 'px'" :autoplay="false" arrow="never" indicator-position="none"> <div class="swiper-title">
<el-carousel-item v-for="item in 4" :key="item"> <span style="">产线B</span>
<img :style="{width: '90%', margin: 'auto 5%', marginTop: 87 * beilv + 'px'}" :src="require('../assets/img/choicepart/factory-model.png')" alt="">
<svg-icon
v-for="(i, index) in materialList"
:key="index + '3'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + 22 + '%' }"
/>
<svg-icon
v-for="(i, index) in materialList"
:key="index + '4'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: 24 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
/>
</el-carousel-item>
</el-carousel>
<div class="swiper-indicator">
<svg-icon class="item-icon swiper-icon-left" icon-class="jiantou" @click="handleSwiperTwoLeft" />
<svg-icon class="item-icon swiper-icon-right" icon-class="jiantou" @click="handleSwiperTwoRight" />
<el-carousel ref="swiper2text" class="swiper-indicator-item" height="24px" :autoplay="false" arrow="never" indicator-position="none">
<el-carousel-item v-for="item in 4" :key="item">
<p class="swiper-indicator-text" :title="'这是第' + item + '段文本'">这是第{{ item }}段文本</p>
</el-carousel-item>
</el-carousel>
</div> </div>
<img :style="{width: '90%',height: 191 * beilv - 4 + 'px', margin: 'auto 5%'}" :src="require('../assets/img/choicepart/factory-model-B.png')" alt="">
<svg-icon
v-for="(i, index) in BList"
:key="index + '2'"
:icon-class="i.status === 1 ? 'signal' : i.status === 2 ? 'signal-warning' : 'signal-error'"
:style="{ position: 'absolute', fontSize: 22 * beilv + 'px', left: i.left + '%', top: i.top + '%' }"
/>
</base-container> </base-container>
</el-col> </el-col>
</el-row> </el-row>
<el-row :style="{ padding: '0 ' + 25 * beilv + 'px', margin: '17px 0' }"> <el-row :style="{ padding: '0 ' + 25 * beilv + 'px', margin: `${17 * beilv}px 0` }">
<el-col :span="12" style="paddingRight: 12px"> <el-col :span="12" :style="{paddingRight: 12 * beilv + 'px'}">
<base-container title-icon="wuliu" title="生产物流仓储设备通讯状态" class="swiper-container" :beilv="beilv" :height="279"> <base-container title-icon="wuliu" title="生产物流仓储设备通讯状态" class="swiper-container" :beilv="beilv" :height="279">
<el-row :gutter="12" style="padding: 0 24px"> <el-row :style="{padding: `0 ${24 * beilv}px`}">
<el-col :span="12"> <base-table
<base-table :page="1"
:page="1" :limit="7"
:limit="7" :show-index="false"
:show-index="false" :beilv="beilv"
:beilv="beilv" :table-config="tableProp"
:table-config="tableProp" :table-data="wuliuList"
:table-data="wuliuList" />
/>
</el-col>
<el-col :span="12">
<base-table
:page="1"
:limit="7"
:show-index="false"
:beilv="beilv"
:table-config="tableProp"
:table-data="wuliuList"
/>
</el-col>
</el-row> </el-row>
</base-container> </base-container>
</el-col> </el-col>
<el-col :span="12" style="paddingLeft: 12px"> <el-col :span="12" :style="{paddingLeft: 12 * beilv + 'px'}">
<base-container title-icon="material" title="公用工程设备通信状态" class="swiper-container" :beilv="beilv" :height="279"> <base-container title-icon="material" title="公用工程设备通信状态" class="swiper-container" :beilv="beilv" :height="279">
<el-row :gutter="12" style="padding: 0 24px"> <el-row :style="{padding: `0 ${24 * beilv}px`}">
<el-col :span="12"> <base-table
<base-table :page="1"
:page="1" :limit="7"
:limit="7" :show-index="false"
:show-index="false" :beilv="beilv"
:beilv="beilv" :table-config="tableProp"
:table-config="tableProp" :table-data="materialList"
:table-data="materialList" />
/>
</el-col>
<el-col :span="12">
<base-table
:page="1"
:limit="7"
:show-index="false"
:beilv="beilv"
:table-config="tableProp"
:table-data="materialList"
/>
</el-col>
</el-row> </el-row>
</base-container> </base-container>
</el-col> </el-col>
@ -159,23 +103,92 @@ const tableProp = [
subcomponent: statusCell subcomponent: statusCell
} }
] ]
const AList = [
{ equipmentName: '上片1', status: 1, left: 7, top: 22 },
{ equipmentName: '磨边1-1', status: 1, left: 11.5, top: 22 },
{ equipmentName: '磨边1-2', status: 2, left: 16.7, top: 22 },
{ equipmentName: '清洗1-2', status: 1, left: 20, top: 22 },
{ equipmentName: '打孔1', status: 1, left: 25.8, top: 22 },
{ equipmentName: '清洗1-2', status: 1, left: 31.5, top: 22 },
{ equipmentName: '丝印1', status: 1, left: 38.3, top: 22 },
{ equipmentName: '固化1', status: 1, left: 43.9, top: 22 },
{ equipmentName: '储片1', status: 1, left: 47.9, top: 22 },
{ equipmentName: '清洗1-3', status: 1, left: 85.3, top: 31 },
{ equipmentName: '下片1', status: 1, left: 91.8, top: 31 },
{ equipmentName: '上片2', status: 2, left: 7, top: 41 },
{ equipmentName: '磨边2-1', status: 1, left: 11.5, top: 41 },
{ equipmentName: '磨边2-2', status: 2, left: 16.7, top: 41 },
{ equipmentName: '清洗2-2', status: 2, left: 20, top: 41 },
{ equipmentName: '打孔2', status: 2, left: 25.8, top: 41 },
{ equipmentName: '清洗2-2', status: 1, left: 31.5, top: 41 },
{ equipmentName: '丝印2', status: 1, left: 38.3, top: 41 },
{ equipmentName: '固化2', status: 1, left: 43.9, top: 41 },
{ equipmentName: '储片2', status: 1, left: 47.9, top: 41 },
{ equipmentName: '清洗2-3', status: 1, left: 85.3, top: 46.5 },
{ equipmentName: '下片2', status: 1, left: 91.8, top: 46.5 },
{ equipmentName: '上片3', status: 1, left: 7, top: 60 },
{ equipmentName: '磨边3-1', status: 1, left: 11.5, top: 60 },
{ equipmentName: '磨边3-2', status: 1, left: 16.7, top: 60 },
{ equipmentName: '清洗3-2', status: 1, left: 20, top: 60 },
{ equipmentName: '打孔3', status: 1, left: 25.8, top: 60 },
{ equipmentName: '清洗3-2', status: 3, left: 31.5, top: 60 },
{ equipmentName: '丝印3', status: 1, left: 38.3, top: 60 },
{ equipmentName: '固化3', status: 1, left: 43.9, top: 60 },
{ equipmentName: '储片3', status: 1, left: 47.9, top: 60 },
{ equipmentName: '清洗3-3', status: 1, left: 85.3, top: 63 },
{ equipmentName: '下片3', status: 1, left: 91.8, top: 63 },
{ equipmentName: '钢化', status: 1, left: 64.5, top: 63 }
]
const BList = [
{ equipmentName: '上片1', status: 3, left: 7, top: 22 },
{ equipmentName: '磨边1-1', status: 1, left: 11.1, top: 22 },
{ equipmentName: '磨边1-2', status: 1, left: 16.1, top: 22 },
{ equipmentName: '清洗1-2', status: 3, left: 19, top: 22 },
{ equipmentName: '打孔1', status: 3, left: 24.8, top: 22 },
{ equipmentName: '清洗1-2', status: 1, left: 30, top: 22 },
{ equipmentName: '丝印1', status: 1, left: 36.7, top: 22 },
{ equipmentName: '固化1', status: 1, left: 41.9, top: 22 },
{ equipmentName: '储片1', status: 1, left: 45.7, top: 22 },
{ equipmentName: '清洗1-3', status: 1, left: 81, top: 24 },
{ equipmentName: '下片1', status: 1, left: 86.3, top: 27 },
{ equipmentName: '下片2', status: 1, left: 89, top: 27 },
{ equipmentName: '下片3', status: 1, left: 91.8, top: 27 },
{ equipmentName: '上片1', status: 1, left: 7, top: 41 },
{ equipmentName: '磨边1-1', status: 1, left: 11.1, top: 41 },
{ equipmentName: '磨边1-2', status: 1, left: 16.1, top: 41 },
{ equipmentName: '清洗1-2', status: 1, left: 19, top: 41 },
{ equipmentName: '打孔1', status: 1, left: 24.8, top: 41 },
{ equipmentName: '清洗1-2', status: 1, left: 30, top: 41 },
{ equipmentName: '丝印1', status: 1, left: 36.7, top: 41 },
{ equipmentName: '固化1', status: 1, left: 41.9, top: 41 },
{ equipmentName: '储片1', status: 1, left: 45.7, top: 41 },
{ equipmentName: '清洗1-3', status: 1, left: 81, top: 49 },
{ equipmentName: '上片1', status: 1, left: 7, top: 60 },
{ equipmentName: '磨边1-1', status: 1, left: 11.1, top: 60 },
{ equipmentName: '磨边1-2', status: 1, left: 16.1, top: 60 },
{ equipmentName: '清洗1-2', status: 1, left: 19, top: 60 },
{ equipmentName: '打孔1', status: 1, left: 24.8, top: 60 },
{ equipmentName: '清洗1-2', status: 1, left: 30, top: 60 },
{ equipmentName: '丝印1', status: 1, left: 36.7, top: 60 },
{ equipmentName: '固化1', status: 3, left: 41.9, top: 60 },
{ equipmentName: '储片1', status: 3, left: 45.7, top: 60 },
{ equipmentName: '钢化', status: 1, left: 61.5, top: 27 }
]
const wuliuList = [ const wuliuList = [
{ equipmentName: '包装机', status: 1, left: 23, top: 23 }, { equipmentName: '包装机', status: 1 },
{ equipmentName: '输送线', status: 2, left: 27, top: 23 }, { equipmentName: '输送线', status: 2 },
{ equipmentName: '堆垛机', status: 3, left: 38.7, top: 23 }, { equipmentName: '堆垛机', status: 3 },
{ equipmentName: 'AGV', status: 3, left: 47, top: 23 }, { equipmentName: 'AGV', status: 3 },
{ equipmentName: '包装机', status: 1, left: 51, top: 23 }, { equipmentName: 'PDA', status: 1 },
{ equipmentName: '输送线', status: 2, left: 57.3, top: 23 }, { equipmentName: 'ERP', status: 2 }
{ equipmentName: '包装机', status: 1, left: 82.5, top: 23 }
] ]
const materialList = [ const materialList = [
{ equipmentName: '包装机', status: 1, left: 23, top: 23 }, { equipmentName: '低压配电', status: 1 },
{ equipmentName: '输送线', status: 2, left: 27, top: 23 }, { equipmentName: '余热发电', status: 2 },
{ equipmentName: '堆垛机', status: 3, left: 38.7, top: 23 }, { equipmentName: '天然气', status: 3 },
{ equipmentName: 'AGV', status: 3, left: 47, top: 23 }, { equipmentName: '水泵', status: 3 },
{ equipmentName: '包装机', status: 1, left: 51, top: 23 }, { equipmentName: '风机', status: 1 },
{ equipmentName: '输送线', status: 2, left: 57.3, top: 23 }, { equipmentName: '氧气', status: 2 }
{ equipmentName: '包装机', status: 1, left: 82.5, top: 23 }
] ]
export default { export default {
@ -195,7 +208,9 @@ export default {
beilv: 1, beilv: 1,
tableProp, tableProp,
wuliuList, wuliuList,
materialList materialList,
AList,
BList
} }
}, },
created() { created() {
@ -208,8 +223,10 @@ export default {
this.time = a[1] this.time = a[1]
}, 1000) }, 1000)
this.beilv = document.body.offsetWidth / 1920 this.beilv = document.body.offsetWidth / 1920
document.documentElement.style.setProperty('--beilv', this.beilv)
addEventListener('resize', eventListener = () => { addEventListener('resize', eventListener = () => {
this.beilv = document.body.offsetWidth / 1920 this.beilv = document.body.offsetWidth / 1920
document.documentElement.style.setProperty('--beilv', this.beilv)
}) })
}, },
destroyed() { destroyed() {
@ -226,22 +243,6 @@ export default {
}, },
handleHome() { handleHome() {
this.$router.push('/index') this.$router.push('/index')
},
handleSwiperOneLeft() {
this.$refs.swiper1item.prev()
this.$refs.swiper1text.prev()
},
handleSwiperOneRight() {
this.$refs.swiper1item.next()
this.$refs.swiper1text.next()
},
handleSwiperTwoLeft() {
this.$refs.swiper2item.prev()
this.$refs.swiper2text.prev()
},
handleSwiperTwoRight() {
this.$refs.swiper2item.next()
this.$refs.swiper2text.next()
} }
} }
} }
@ -258,66 +259,86 @@ export default {
.factory-navbar { .factory-navbar {
user-select: none; user-select: none;
width: 100%; width: 100%;
min-width: 1600px; min-width: calc(1600px * var(--beilv));
height: 11vh; height: 11vh;
line-height: 11vh; line-height: 11vh;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: 30px; font-size: calc(29px * var(--beilv));
background: url('../assets/img/choicepart/header.png') no-repeat; background: url('../assets/img/choicepart/header.png') no-repeat;
background-size: 100% auto; background-size: 100% auto;
position: relative;
.navbar-left { .navbar-left {
color: #49E1DE; color: #49E1DE;
float: left; position: absolute;
position: relative; font-family: zcoolqingkehuangyouti-Regular;
left: 58px; left: calc(58px * var(--beilv));
font-size: 32px; font-size: calc(32px * var(--beilv));
line-height: 12vh; line-height: 12vh;
} }
.navbar-right { .navbar-right {
color: #49E1DE; color: #49E1DE;
float: right; position: absolute;
position: relative; font-family: zcoolqingkehuangyouti-Regular;
right: 84px; right: calc(84px * var(--beilv));
font-size: 32px; font-size: calc(32px * var(--beilv));
line-height: 12vh; line-height: 12vh;
span { span {
position: relative; position: relative;
.item-icon { .item-icon {
position: absolute; position: absolute;
top: 0; top: calc(3px * var(--beilv));
right: -56px; right: calc(-56px * var(--beilv));
cursor: pointer; cursor: pointer;
} }
} }
} }
.navbar-title { .navbar-title {
letter-spacing: calc(4px * var(--beilv));
.navbar-title-icon { .navbar-title-icon {
position: relative; position: relative;
top: 13px; top: calc(13px * var(--beilv));
right: 12px; right: calc(12px * var(--beilv));
}
img {
width: calc(34px * var(--beilv));
height: calc(46px * var(--beilv));
} }
} }
} }
.container-main { .container-main {
margin-top: 24px; margin-top: calc(24px * var(--beilv));
.swiper-container { .swiper-container {
position: relative; position: relative;
user-select: none; user-select: none;
.swiper-title {
line-height: calc(68px * var(--beilv));
height: calc(68px * var(--beilv));
letter-spacing: calc(6px * var(--beilv));
font-size: calc(22px * var(--beilv));
color: #47F8DC;
text-align: center;
span {
display: inline-block;
width: calc(344px * var(--beilv));
background: url('../assets/img/choicepart/factory-model-title.png') no-repeat center;
background-size: calc(344px * var(--beilv)) calc(24px * var(--beilv)) ;
}
}
.swiper-indicator { .swiper-indicator {
position: absolute; position: absolute;
color: #47F8DC; color: #47F8DC;
width: 300px; width: calc(300px * var(--beilv));
text-align: center; text-align: center;
font-size: 22px; font-size: calc(22px * var(--beilv));
bottom: 22px; bottom: calc(22px * var(--beilv));
left: 50%; left: 50%;
transform:translate(-50%); transform:translate(-50%);
z-index: 2; z-index: 2;
.swiper-indicator-item { .swiper-indicator-item {
max-width: 300px; max-width: calc(300px * var(--beilv));
.swiper-indicator-text { .swiper-indicator-text {
max-width: 300px; max-width: calc(300px * var(--beilv));
overflow:hidden; overflow:hidden;
text-overflow:ellipsis; text-overflow:ellipsis;
white-space:nowrap; white-space:nowrap;
@ -332,12 +353,12 @@ export default {
} }
.swiper-icon-left { .swiper-icon-left {
transform: rotateY(180deg); transform: rotateY(180deg);
margin-right: 12px; margin-right: calc(12px * var(--beilv));
left: -36px; left: calc(-36px * var(--beilv));
} }
.swiper-icon-right { .swiper-icon-right {
margin-left: 12px; margin-left: calc(12px * var(--beilv));
right: -36px; right: calc(-36px * var(--beilv));
} }
} }
} }
@ -348,19 +369,19 @@ export default {
} }
::-webkit-scrollbar-track-piece { ::-webkit-scrollbar-track-piece {
// //
background: rgba(255, 255, 255, 0.1); background: transparent;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
// //
width: 9px; width: calc(9px * var(--beilv));
height: 9px; height: calc(9px * var(--beilv));
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
// //
background-color: #dddddd; background-color: #dddddd;
background-clip: padding-box; background-clip: padding-box;
min-height: 28px; min-height: calc(28px * var(--beilv));
border-radius: 9px; border-radius: calc(9px * var(--beilv));
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: #bbb; background-color: #bbb;

View File

@ -125,21 +125,22 @@ export default {
line-height: 11vh; line-height: 11vh;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: calc(30px * var(--beilv)); font-size: calc(29px * var(--beilv));
background: url('../assets/img/choicepart/header.png') no-repeat; background: url('../assets/img/choicepart/header.png') no-repeat;
background-size: 100% auto; background-size: 100% auto;
position: relative;
.navbar-left { .navbar-left {
color: #49E1DE; color: #49E1DE;
float: left; position: absolute;
position: relative; font-family: zcoolqingkehuangyouti-Regular;
left: calc(58px * var(--beilv)); left: calc(58px * var(--beilv));
font-size: calc(32px * var(--beilv)); font-size: calc(32px * var(--beilv));
line-height: 12vh; line-height: 12vh;
} }
.navbar-right { .navbar-right {
color: #49E1DE; color: #49E1DE;
float: right; position: absolute;
position: relative; font-family: zcoolqingkehuangyouti-Regular;
right: calc(84px * var(--beilv)); right: calc(84px * var(--beilv));
font-size: calc(32px * var(--beilv)); font-size: calc(32px * var(--beilv));
line-height: 12vh; line-height: 12vh;
@ -147,7 +148,7 @@ export default {
position: relative; position: relative;
.item-icon { .item-icon {
position: absolute; position: absolute;
top: 0; top: calc(3px * var(--beilv));
right: calc(-56px * var(--beilv)); right: calc(-56px * var(--beilv));
cursor: pointer; cursor: pointer;
} }