|
|
@@ -0,0 +1,708 @@
|
|
|
+<template>
|
|
|
+ <div class="device-detail" v-if="productInfo">
|
|
|
+ <div class="detail-title">设备认证</div>
|
|
|
+ <div class="page-top">
|
|
|
+ <div class="swiper">
|
|
|
+ <!-- <SimpleSwiper :imageList="bannerList"></SimpleSwiper> -->
|
|
|
+ <img :src="productInfo.pcImage" class="device-image" />
|
|
|
+ <div class="auth-seal"></div>
|
|
|
+ <img
|
|
|
+ class="auth-card"
|
|
|
+ :src="authCardImage"
|
|
|
+ @click="onShowAuthCard"
|
|
|
+ v-if="!showAuthCard"
|
|
|
+ />
|
|
|
+ <!-- <img class="auth-logo" :src="authLogoImage" /> -->
|
|
|
+ </div>
|
|
|
+ <div class="device-info">
|
|
|
+ <div class="logo">
|
|
|
+ <img :src="authLogoImage" alt="logo" />
|
|
|
+ </div>
|
|
|
+ <div class="section">
|
|
|
+ <div class="name" v-text="productInfo.productName"></div>
|
|
|
+ <div class="sncode mobile">
|
|
|
+ SN码：<span>{{ productInfo.snCode }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <span>{{ productInfo.brandName }}</span>
|
|
|
+ <i></i>
|
|
|
+ <span>{{ productInfo.productionPlace }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="sncode pc">
|
|
|
+ SN码：<span>{{ productInfo.snCode | snCodeRender }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="maker" v-if="productInfo.manufacturer">
|
|
|
+ 制造商：{{ productInfo.manufacturer }}
|
|
|
+ </div>
|
|
|
+ <div class="supplier">代理商：{{ productInfo.shopName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="auth">
|
|
|
+ <div class="auth-icon"></div>
|
|
|
+ <div class="auth-info">
|
|
|
+ <span class="font-bold">ROS'S</span>
|
|
|
+ <span>授予</span>
|
|
|
+ <span>{{ productInfo.authParty }}</span>
|
|
|
+ <span>正品拥有</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page-content">
|
|
|
+ <div class="device-params">
|
|
|
+ <div class="title">产品参数</div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="params">
|
|
|
+ <div class="row" v-for="(row, index) in paramListRender" :key="index">
|
|
|
+ <template v-for="(col, index) in row">
|
|
|
+ <div class="col" :key="'name' + index">
|
|
|
+ {{ col.paramName }}{{ isPc ? '：' : '' }}
|
|
|
+ </div>
|
|
|
+ <div class="col" :key="'content' + index">
|
|
|
+ {{ col.paramContent }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 授权牌弹窗 -->
|
|
|
+ <div class="mask" v-if="showAuthCard" @click="onHideAuthCard"></div>
|
|
|
+ <transition
|
|
|
+ enter-active-class="animate__zoomIn"
|
|
|
+ leave-active-class="animate__zoomOut"
|
|
|
+ >
|
|
|
+ <div class="auth-card-content animate__animated" v-if="showAuthCard">
|
|
|
+ <div class="auth-card-popup">
|
|
|
+ <span class="el-icon-circle-close" @click="onHideAuthCard"></span>
|
|
|
+ <img :src="authCardImage" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import { chunk } from 'lodash'
|
|
|
+export default {
|
|
|
+ layout: 'app-ross',
|
|
|
+ filters: {
|
|
|
+ snCodeRender: function (code) {
|
|
|
+ return code.replace(/^(\w{2})\w+(\w{4})$/, '$1******$2')
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showAuthCard: false,
|
|
|
+ bannerList: [],
|
|
|
+ productInfo: null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isPc() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ window.location.reload()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['isPc']),
|
|
|
+ // 参数列表
|
|
|
+ paramListRender() {
|
|
|
+ if (!this.productInfo) return []
|
|
|
+ return this.isPc
|
|
|
+ ? chunk(this.productInfo.paramList, 2)
|
|
|
+ : chunk(this.productInfo.paramList, 1)
|
|
|
+ },
|
|
|
+ // 机构logo
|
|
|
+ authLogoImage() {
|
|
|
+ if (!this.productInfo) return ''
|
|
|
+ return this.productInfo.authLogo
|
|
|
+ },
|
|
|
+ // 授权牌
|
|
|
+ authCardImage() {
|
|
|
+ if (!this.productInfo) return ''
|
|
|
+ return this.productInfo.appletsCertificateImage
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.fetchProductDetails()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onShowAuthCard() {
|
|
|
+ this.showAuthCard = true
|
|
|
+ },
|
|
|
+ onHideAuthCard() {
|
|
|
+ this.showAuthCard = false
|
|
|
+ },
|
|
|
+ async fetchProductDetails() {
|
|
|
+ const productId = this.$route.query.id
|
|
|
+ try {
|
|
|
+ const { data } = await this.$http.api.fetchProductDetails({
|
|
|
+ productId: productId,
|
|
|
+ })
|
|
|
+ this.productInfo = data
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep {
|
|
|
+ .swiper-pagination-bullet {
|
|
|
+ background: #f3920d !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .simple-swiper {
|
|
|
+ .swiper-pagination-bullet-active {
|
|
|
+ background: #f3920d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.mask {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 8;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+// pc 端
|
|
|
+@media screen and (min-width: 768px) {
|
|
|
+ .device-detail {
|
|
|
+ margin-bottom: 48px;
|
|
|
+
|
|
|
+ .auth-card-content {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 9;
|
|
|
+ .auth-card-popup {
|
|
|
+ position: relative;
|
|
|
+ width: 622px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-circle-close {
|
|
|
+ position: absolute;
|
|
|
+ top: -50px;
|
|
|
+ right: 0;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-title {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #282828;
|
|
|
+ margin: 32px auto 24px;
|
|
|
+ width: 1200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-top,
|
|
|
+ .page-content {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ .page-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 24px;
|
|
|
+ padding-right: 40px;
|
|
|
+ .swiper {
|
|
|
+ position: relative;
|
|
|
+ width: 540px;
|
|
|
+ height: 540px;
|
|
|
+ background: #f7f7f7;
|
|
|
+ .device-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ ::v-deep {
|
|
|
+ img {
|
|
|
+ width: 540px;
|
|
|
+ height: 540px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-seal {
|
|
|
+ position: absolute;
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ background: url(~assets/theme-images/ross/pc-icon-auth-seal.png)
|
|
|
+ no-repeat center;
|
|
|
+ background-size: 70px;
|
|
|
+ right: 24px;
|
|
|
+ bottom: 24px;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-card {
|
|
|
+ position: absolute;
|
|
|
+ width: auto;
|
|
|
+ height: 110px;
|
|
|
+ display: block;
|
|
|
+ bottom: 24px;
|
|
|
+ left: 24px;
|
|
|
+ z-index: 2;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-logo {
|
|
|
+ position: absolute;
|
|
|
+ max-width: 120px;
|
|
|
+ max-height: 120px;
|
|
|
+ top: 24px;
|
|
|
+ left: 24px;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .device-info {
|
|
|
+ width: 572px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .section {
|
|
|
+ width: 360px;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ width: 114px;
|
|
|
+ height: 114px;
|
|
|
+ border-radius: 50%;
|
|
|
+ // background: #d8d8d8;
|
|
|
+ border: 1px solid #d8d8d8;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: 6px;
|
|
|
+ bottom: 0;
|
|
|
+ display: block;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background: url(~assets/theme-images/ross/pc-icon-auth-ren.png)
|
|
|
+ no-repeat center;
|
|
|
+ background-size: 23px;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // background: pink;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #282828;
|
|
|
+ line-height: 1.6;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row,
|
|
|
+ .sncode,
|
|
|
+ .maker {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ line-height: 24px;
|
|
|
+ i {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 16px;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 1px;
|
|
|
+ height: 16px;
|
|
|
+ background: #999999;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sncode.mobile {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sncode.pc {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #282828;
|
|
|
+ }
|
|
|
+ .supplier,
|
|
|
+ .maker {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #282828;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 114px;
|
|
|
+ background: #f3920d;
|
|
|
+ margin-top: 56px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 24px;
|
|
|
+
|
|
|
+ .auth-icon {
|
|
|
+ height: 28px;
|
|
|
+ background: url(~assets/theme-images/ross/pc-icon-auth.png)
|
|
|
+ no-repeat left center;
|
|
|
+ background-size: auto 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-info {
|
|
|
+ font-size: 0;
|
|
|
+ margin-top: 10px;
|
|
|
+ span {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page-content {
|
|
|
+ margin-top: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 24px;
|
|
|
+ .device-params {
|
|
|
+ .title {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #282828;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ height: 1px;
|
|
|
+ background: #ececec;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 73px;
|
|
|
+ height: 2px;
|
|
|
+ background: #f3920d;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .params {
|
|
|
+ width: 100%;
|
|
|
+ .row {
|
|
|
+ display: table-row;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col {
|
|
|
+ display: table-cell;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 12px 0;
|
|
|
+
|
|
|
+ &:nth-child(2n-1) {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2n) {
|
|
|
+ color: #282828;
|
|
|
+ padding-left: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3) {
|
|
|
+ padding-left: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 移动端
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .device-detail {
|
|
|
+ .detail-title {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-card-content {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 9;
|
|
|
+ .auth-card-popup {
|
|
|
+ position: relative;
|
|
|
+ width: 86vw;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-circle-close {
|
|
|
+ position: absolute;
|
|
|
+ top: -8vw;
|
|
|
+ right: 0;
|
|
|
+ font-size: 7vw;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-top,
|
|
|
+ .page-content {
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ .page-top {
|
|
|
+ .swiper {
|
|
|
+ position: relative;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vw;
|
|
|
+ background: #f7f7f7;
|
|
|
+
|
|
|
+ .device-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ img {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-seal {
|
|
|
+ position: absolute;
|
|
|
+ width: 13.8vw;
|
|
|
+ height: 13.8vw;
|
|
|
+ background: url(~assets/theme-images/ross/h5-icon-auth-seal.png)
|
|
|
+ no-repeat center;
|
|
|
+ background-size: 13.8vw;
|
|
|
+ right: 4vw;
|
|
|
+ bottom: 4vw;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-card {
|
|
|
+ position: absolute;
|
|
|
+ width: auto;
|
|
|
+ height: 20.6vw;
|
|
|
+ display: block;
|
|
|
+ bottom: 4vw;
|
|
|
+ left: 4vw;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-logo {
|
|
|
+ position: absolute;
|
|
|
+ max-width: 18vw;
|
|
|
+ max-height: 18vw;
|
|
|
+ top: 4vw;
|
|
|
+ left: 4vw;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .device-info {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .section {
|
|
|
+ word-break: break-all;
|
|
|
+ padding: 4vw 4vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ width: 18vw;
|
|
|
+ height: 18vw;
|
|
|
+ border-radius: 50%;
|
|
|
+ // background: #d8d8d8;
|
|
|
+ border: 0.1vw solid #d8d8d8;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ right: 4vw;
|
|
|
+ top: 15.3vw;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: 0.7vw;
|
|
|
+ bottom: 0;
|
|
|
+ display: block;
|
|
|
+ width: 3.6vw;
|
|
|
+ height: 3.6vw;
|
|
|
+ background: url(~assets/theme-images/ross/h5-icon-auth-ren.png)
|
|
|
+ no-repeat center;
|
|
|
+ background-size: 3.6vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // background: pink;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 5.4vw;
|
|
|
+ color: #282828;
|
|
|
+ line-height: 7.4vw;
|
|
|
+ margin-bottom: 2.4vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sncode.pc {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .sncode.mobile {
|
|
|
+ margin: 2.4vw 0 5.6vw;
|
|
|
+ color: #282828;
|
|
|
+ font-size: 4vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ line-height: 4.7vw;
|
|
|
+ i {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 4vw;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 0.3vw;
|
|
|
+ height: 3vw;
|
|
|
+ background: #999999;
|
|
|
+ position: absolute;
|
|
|
+ top: 1vw;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 3.6vw;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .row,
|
|
|
+ .maker {
|
|
|
+ margin-bottom: 2.4vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .supplier,
|
|
|
+ .maker {
|
|
|
+ font-size: 3.6vw;
|
|
|
+ color: #282828;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 20vw;
|
|
|
+ background: #f3920d;
|
|
|
+ margin-top: 6.4vw;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5.2vw 4vw;
|
|
|
+
|
|
|
+ .auth-icon {
|
|
|
+ height: 4.9vw;
|
|
|
+ background: url(~assets/theme-images/ross/h5-icon-auth.png)
|
|
|
+ no-repeat left center;
|
|
|
+ background-size: auto 4.9vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-info {
|
|
|
+ font-size: 0;
|
|
|
+ margin-top: 10px;
|
|
|
+ span {
|
|
|
+ font-size: 3.6vw;
|
|
|
+ line-height: 6.4vw;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page-content {
|
|
|
+ .device-params {
|
|
|
+ padding: 11.2vw 4vw;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .title {
|
|
|
+ font-size: 4vw;
|
|
|
+ color: #282828;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ height: 0.2vw;
|
|
|
+ background: #ececec;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 4.7vw;
|
|
|
+ margin-bottom: 1.2vw;
|
|
|
+ }
|
|
|
+ .params {
|
|
|
+ width: 100%;
|
|
|
+ word-break: break-all;
|
|
|
+ text-align: justify;
|
|
|
+ .row {
|
|
|
+ display: table-row;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col {
|
|
|
+ display: table-cell;
|
|
|
+ font-size: 3.6vw;
|
|
|
+ padding: 2.8vw 0;
|
|
|
+
|
|
|
+ &:nth-child(2n-1) {
|
|
|
+ color: #999999;
|
|
|
+ padding-right: 3.2vw;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2n) {
|
|
|
+ color: #282828;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
yuwenjun1997
