'update'
Dieser Commit ist enthalten in:
Ursprung
adc9c35963
Commit
ff4e76f843
6
src/assets/fonts/font.scss
Normale Datei
6
src/assets/fonts/font.scss
Normale Datei
@ -0,0 +1,6 @@
|
||||
@font-face {
|
||||
font-family: 'zcoolqingkehuangyouti-Regular'; //重命名字体名
|
||||
src: url('./zcoolqingkehuangyouti-Regular.ttf'); //引入字体
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
BIN
src/assets/fonts/zcoolqingkehuangyouti-Regular.ttf
Normale Datei
BIN
src/assets/fonts/zcoolqingkehuangyouti-Regular.ttf
Normale Datei
Binäre Datei nicht angezeigt.
BIN
src/assets/fonts/zcoolqingkehuangyouti-Regular.woff
Normale Datei
BIN
src/assets/fonts/zcoolqingkehuangyouti-Regular.woff
Normale Datei
Binäre Datei nicht angezeigt.
BIN
src/assets/fonts/zcoolqingkehuangyouti-Regular.woff2
Normale Datei
BIN
src/assets/fonts/zcoolqingkehuangyouti-Regular.woff2
Normale Datei
Binäre Datei nicht angezeigt.
BIN
src/assets/img/choicepart/factory-model-A.png
Normale Datei
BIN
src/assets/img/choicepart/factory-model-A.png
Normale Datei
Binäre Datei nicht angezeigt.
Nachher Breite: | Höhe: | Größe: 2.0 MiB |
BIN
src/assets/img/choicepart/factory-model-B.png
Normale Datei
BIN
src/assets/img/choicepart/factory-model-B.png
Normale Datei
Binäre Datei nicht angezeigt.
Nachher Breite: | Höhe: | Größe: 1.9 MiB |
BIN
src/assets/img/choicepart/factory-model-title.png
Normale Datei
BIN
src/assets/img/choicepart/factory-model-title.png
Normale Datei
Binäre Datei nicht angezeigt.
Nachher Breite: | Höhe: | Größe: 24 KiB |
@ -77,12 +77,12 @@ export default {
|
||||
width: 100%;
|
||||
background-color: rgba($color: #061027, $alpha: 0.15);
|
||||
position: relative;
|
||||
border: 2px solid;
|
||||
box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
|
||||
border: calc(2px * var(--beilv)) solid;
|
||||
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;
|
||||
.line {
|
||||
position: absolute;
|
||||
border-top: 4px solid #52FFF1;
|
||||
border-top: calc(4px * var(--beilv)) solid #52FFF1;
|
||||
width: 2em;
|
||||
top: -.25em;
|
||||
left: -.25em;
|
||||
|
@ -142,6 +142,9 @@ export default {
|
||||
.visual-base-table-container {
|
||||
.el-table {
|
||||
border: 0;
|
||||
.cell {
|
||||
line-height: calc(23px * var(--beilv));
|
||||
}
|
||||
}
|
||||
.el-table::before,.el-table--border::after {
|
||||
background-color: transparent;
|
||||
|
@ -22,6 +22,7 @@ import router from './router'
|
||||
import i18n from './lang' // internationalization
|
||||
import './icons' // icon
|
||||
import './utils/error-log' // error log
|
||||
import './assets/fonts/font.scss'
|
||||
|
||||
import * as filters from './filters' // global filters
|
||||
/**
|
||||
|
@ -1,5 +1,5 @@
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@ -16,4 +16,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-font {
|
||||
font-size: calc(20px * var(--beilv));
|
||||
}
|
||||
</style>
|
||||
|
@ -6,7 +6,7 @@
|
||||
</span>
|
||||
<span class="navbar-title">
|
||||
<img :src="require(`../assets/img/choicepart/icon.png`)" class="navbar-title-icon" alt="">
|
||||
合 肥 新 能 源 数 字 工 厂
|
||||
合肥新能源数字工厂数据采集平台
|
||||
</span>
|
||||
<span class="navbar-right">
|
||||
<span>
|
||||
@ -18,118 +18,62 @@
|
||||
<el-row class="container-main">
|
||||
<el-row :style="{ padding: '0 ' + 25 * beilv + 'px' }">
|
||||
<el-col :span="24">
|
||||
<base-container class="swiper-container" :beilv="beilv" :height="303">
|
||||
<el-carousel ref="swiper1item" :height="303 * beilv - 4 + 'px'" :autoplay="false" arrow="never" indicator-position="none">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<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>
|
||||
<base-container class="swiper-container" :beilv="beilv" :height="298">
|
||||
<div class="swiper-title">
|
||||
<span style="">产线A</span>
|
||||
</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>
|
||||
</el-col>
|
||||
</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">
|
||||
<base-container class="swiper-container" :beilv="beilv" :height="303">
|
||||
<el-carousel ref="swiper2item" :height="303 * beilv - 4 + 'px'" :autoplay="false" arrow="never" indicator-position="none">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<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>
|
||||
<base-container class="swiper-container" :beilv="beilv" :height="298">
|
||||
<div class="swiper-title">
|
||||
<span style="">产线B</span>
|
||||
</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>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :style="{ padding: '0 ' + 25 * beilv + 'px', margin: '17px 0' }">
|
||||
<el-col :span="12" style="paddingRight: 12px">
|
||||
<el-row :style="{ padding: '0 ' + 25 * beilv + 'px', margin: `${17 * beilv}px 0` }">
|
||||
<el-col :span="12" :style="{paddingRight: 12 * beilv + 'px'}">
|
||||
<base-container title-icon="wuliu" title="生产物流仓储设备通讯状态" class="swiper-container" :beilv="beilv" :height="279">
|
||||
<el-row :gutter="12" style="padding: 0 24px">
|
||||
<el-col :span="12">
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="7"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="tableProp"
|
||||
: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 :style="{padding: `0 ${24 * beilv}px`}">
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="7"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="tableProp"
|
||||
:table-data="wuliuList"
|
||||
/>
|
||||
</el-row>
|
||||
</base-container>
|
||||
</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">
|
||||
<el-row :gutter="12" style="padding: 0 24px">
|
||||
<el-col :span="12">
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="7"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="tableProp"
|
||||
: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 :style="{padding: `0 ${24 * beilv}px`}">
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="7"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="tableProp"
|
||||
:table-data="materialList"
|
||||
/>
|
||||
</el-row>
|
||||
</base-container>
|
||||
</el-col>
|
||||
@ -159,23 +103,92 @@ const tableProp = [
|
||||
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 = [
|
||||
{ equipmentName: '包装机', status: 1, left: 23, top: 23 },
|
||||
{ equipmentName: '输送线', status: 2, left: 27, top: 23 },
|
||||
{ equipmentName: '堆垛机', status: 3, left: 38.7, top: 23 },
|
||||
{ equipmentName: 'AGV', status: 3, left: 47, top: 23 },
|
||||
{ equipmentName: '包装机', status: 1, left: 51, top: 23 },
|
||||
{ equipmentName: '输送线', status: 2, left: 57.3, top: 23 },
|
||||
{ equipmentName: '包装机', status: 1, left: 82.5, top: 23 }
|
||||
{ equipmentName: '包装机', status: 1 },
|
||||
{ equipmentName: '输送线', status: 2 },
|
||||
{ equipmentName: '堆垛机', status: 3 },
|
||||
{ equipmentName: 'AGV', status: 3 },
|
||||
{ equipmentName: 'PDA', status: 1 },
|
||||
{ equipmentName: 'ERP', status: 2 }
|
||||
]
|
||||
const materialList = [
|
||||
{ equipmentName: '包装机', status: 1, left: 23, top: 23 },
|
||||
{ equipmentName: '输送线', status: 2, left: 27, top: 23 },
|
||||
{ equipmentName: '堆垛机', status: 3, left: 38.7, top: 23 },
|
||||
{ equipmentName: 'AGV', status: 3, left: 47, top: 23 },
|
||||
{ equipmentName: '包装机', status: 1, left: 51, top: 23 },
|
||||
{ equipmentName: '输送线', status: 2, left: 57.3, top: 23 },
|
||||
{ equipmentName: '包装机', status: 1, left: 82.5, top: 23 }
|
||||
{ equipmentName: '低压配电', status: 1 },
|
||||
{ equipmentName: '余热发电', status: 2 },
|
||||
{ equipmentName: '天然气', status: 3 },
|
||||
{ equipmentName: '水泵', status: 3 },
|
||||
{ equipmentName: '风机', status: 1 },
|
||||
{ equipmentName: '氧气', status: 2 }
|
||||
]
|
||||
|
||||
export default {
|
||||
@ -195,7 +208,9 @@ export default {
|
||||
beilv: 1,
|
||||
tableProp,
|
||||
wuliuList,
|
||||
materialList
|
||||
materialList,
|
||||
AList,
|
||||
BList
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -208,8 +223,10 @@ export default {
|
||||
this.time = a[1]
|
||||
}, 1000)
|
||||
this.beilv = document.body.offsetWidth / 1920
|
||||
document.documentElement.style.setProperty('--beilv', this.beilv)
|
||||
addEventListener('resize', eventListener = () => {
|
||||
this.beilv = document.body.offsetWidth / 1920
|
||||
document.documentElement.style.setProperty('--beilv', this.beilv)
|
||||
})
|
||||
},
|
||||
destroyed() {
|
||||
@ -226,22 +243,6 @@ export default {
|
||||
},
|
||||
handleHome() {
|
||||
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 {
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
min-width: 1600px;
|
||||
min-width: calc(1600px * var(--beilv));
|
||||
height: 11vh;
|
||||
line-height: 11vh;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
font-size: calc(29px * var(--beilv));
|
||||
background: url('../assets/img/choicepart/header.png') no-repeat;
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
.navbar-left {
|
||||
color: #49E1DE;
|
||||
float: left;
|
||||
position: relative;
|
||||
left: 58px;
|
||||
font-size: 32px;
|
||||
position: absolute;
|
||||
font-family: zcoolqingkehuangyouti-Regular;
|
||||
left: calc(58px * var(--beilv));
|
||||
font-size: calc(32px * var(--beilv));
|
||||
line-height: 12vh;
|
||||
}
|
||||
.navbar-right {
|
||||
color: #49E1DE;
|
||||
float: right;
|
||||
position: relative;
|
||||
right: 84px;
|
||||
font-size: 32px;
|
||||
position: absolute;
|
||||
font-family: zcoolqingkehuangyouti-Regular;
|
||||
right: calc(84px * var(--beilv));
|
||||
font-size: calc(32px * var(--beilv));
|
||||
line-height: 12vh;
|
||||
span {
|
||||
position: relative;
|
||||
.item-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -56px;
|
||||
top: calc(3px * var(--beilv));
|
||||
right: calc(-56px * var(--beilv));
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-title {
|
||||
letter-spacing: calc(4px * var(--beilv));
|
||||
.navbar-title-icon {
|
||||
position: relative;
|
||||
top: 13px;
|
||||
right: 12px;
|
||||
top: calc(13px * var(--beilv));
|
||||
right: calc(12px * var(--beilv));
|
||||
}
|
||||
img {
|
||||
width: calc(34px * var(--beilv));
|
||||
height: calc(46px * var(--beilv));
|
||||
}
|
||||
}
|
||||
}
|
||||
.container-main {
|
||||
margin-top: 24px;
|
||||
margin-top: calc(24px * var(--beilv));
|
||||
.swiper-container {
|
||||
position: relative;
|
||||
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 {
|
||||
position: absolute;
|
||||
color: #47F8DC;
|
||||
width: 300px;
|
||||
width: calc(300px * var(--beilv));
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
bottom: 22px;
|
||||
font-size: calc(22px * var(--beilv));
|
||||
bottom: calc(22px * var(--beilv));
|
||||
left: 50%;
|
||||
transform:translate(-50%);
|
||||
z-index: 2;
|
||||
.swiper-indicator-item {
|
||||
max-width: 300px;
|
||||
max-width: calc(300px * var(--beilv));
|
||||
.swiper-indicator-text {
|
||||
max-width: 300px;
|
||||
max-width: calc(300px * var(--beilv));
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
@ -332,12 +353,12 @@ export default {
|
||||
}
|
||||
.swiper-icon-left {
|
||||
transform: rotateY(180deg);
|
||||
margin-right: 12px;
|
||||
left: -36px;
|
||||
margin-right: calc(12px * var(--beilv));
|
||||
left: calc(-36px * var(--beilv));
|
||||
}
|
||||
.swiper-icon-right {
|
||||
margin-left: 12px;
|
||||
right: -36px;
|
||||
margin-left: calc(12px * var(--beilv));
|
||||
right: calc(-36px * var(--beilv));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -348,19 +369,19 @@ export default {
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
//滚动条凹槽的颜色,还可以设置边框属性
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
//滚动条的宽度
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
width: calc(9px * var(--beilv));
|
||||
height: calc(9px * var(--beilv));
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
//滚动条的设置
|
||||
background-color: #dddddd;
|
||||
background-clip: padding-box;
|
||||
min-height: 28px;
|
||||
border-radius: 9px;
|
||||
min-height: calc(28px * var(--beilv));
|
||||
border-radius: calc(9px * var(--beilv));
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #bbb;
|
||||
|
@ -125,21 +125,22 @@ export default {
|
||||
line-height: 11vh;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: calc(30px * var(--beilv));
|
||||
font-size: calc(29px * var(--beilv));
|
||||
background: url('../assets/img/choicepart/header.png') no-repeat;
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
.navbar-left {
|
||||
color: #49E1DE;
|
||||
float: left;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
font-family: zcoolqingkehuangyouti-Regular;
|
||||
left: calc(58px * var(--beilv));
|
||||
font-size: calc(32px * var(--beilv));
|
||||
line-height: 12vh;
|
||||
}
|
||||
.navbar-right {
|
||||
color: #49E1DE;
|
||||
float: right;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
font-family: zcoolqingkehuangyouti-Regular;
|
||||
right: calc(84px * var(--beilv));
|
||||
font-size: calc(32px * var(--beilv));
|
||||
line-height: 12vh;
|
||||
@ -147,7 +148,7 @@ export default {
|
||||
position: relative;
|
||||
.item-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: calc(3px * var(--beilv));
|
||||
right: calc(-56px * var(--beilv));
|
||||
cursor: pointer;
|
||||
}
|
||||
|
Laden…
In neuem Issue referenzieren
Einen Benutzer sperren