dongjiabo
/
networkPc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页布局

Browse Source
main
dongmu 7 months ago
parent b53b9c0b48
commit 26d18a5816
1 changed files with 286 additions and 457 deletions
Show Stats Download Patch File Download Diff File

743
src/views/index.vue
Unescape View File

@ -1,289 +1,279 @@
<template>
<div class="home">
<div class="header" style="">
<!-- 导航头 -->
<div class="headerItem" style="">
<div style="font-size: 18px; font-weight: bold">
{{ webHomeList.deptName }}
</div>
<!-- <div>
<el-dropdown>
<span style="cursor: pointer">
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> -->
</div>
</div>
<!-- 内容区第一行 -->
<div>
<div class="fiste" style="">
<el-card class="box-card" style="">
<div
@click="clickQRcode"
v-show="!showQrcode"
style="position: absolute; top: 0; right: 0"
>
<svg
t="1699164043272"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="5477"
width="48"
height="48"
>
<path
d="M71.84375 73.25L63.40625 62h337.5v340.3125L71.84375 73.25zM344.65625 343.25V116.84375H121.0625L344.65625 343.25z m-60.46875-57.65625L175.90625 174.5v-2.8125h113.90625v113.90625h-5.625z m676.40625 112.5H624.5V62h337.5v336.09375z m-281.25-54.84375h223.59375V116.84375H679.34375V343.25z m126.5625 478.125h40.78125v-54.84375h54.84375v140.625h54.84375V962h-19.6875l-130.78125-140.625zM568.25 578.09375l-112.5-115.3125V199.8125h82.96875V90.125h54.84375v168.75h-82.96875v82.96875h54.84375v54.84375h-54.84375v82.96875h195.46875v111.09375h-54.84375v-54.84375H568.25v42.1875z m71.71875 74.53125h151.875V483.875h54.84375v-54.84375h54.84375V483.875h54.84375v57.65625h-113.90625V652.625h113.90625v54.84375H693.40625c2.8125 0-53.4375-54.84375-53.4375-54.84375zM737 171.6875h113.90625v113.90625H737V171.6875z"
fill="#333333"
p-id="5478"
></path>
</svg>
</div>
<div
@click="clickQRcode"
v-if="showQrcode"
class="iconQrcode"
style=""
>
<div class="qrcode-wrap" id="root" ref="qrCodeUrl"></div>
</div>
<div
style="
text-align: end;
margin-bottom: 5px;
margin-right: 35px;
user-select: none;
"
>
<!-- <el-tag>企业货源码</el-tag> -->
<span class="EnterpriseGoods" style="">企业货源码</span>
</div>
<!--头像-标题-操作员 -->
<div
style="
display: flex;
justify-content: space-between;
align-items: flex-end;
"
>
<!-- 头像 -->
<div>
<el-avatar :size="90" src="">
<img :src="feilUrl + webHomeList.avatar" />
</el-avatar>
</div>
<!-- 个人信息 -->
<div style="">
<div>
<span style="font-size: 18px; font-weight: bold">{{
webHomeList.neckName
}}</span>
<span
style="margin-left: 10px; color: #969292; font-size: 12px"
>{{ stateTime }}</span
>
</div>
<div style="margin: 5px 0">
<span>上次登录时间：{{ webHomeList.loginTime || "" }}</span>
</div>
<div>
<span>登录时间：{{ times }}</span>
</div>
</div>
<div>
<div style="margin: 5px 0">
<span>用户名称：{{ webHomeList.userName }}</span>
</div>
<div>
<span>电话：{{ webHomeList.userPhone }}</span>
</div>
</div>
</div>
</el-card>
<el-card class="box-card">
<diV style="font-size: 20px; font-weight: bold">账户余额</diV>
<diV style="text-align: center; color: #b2b1b1">{{
walletVO ? "" : "暂无数据"
}}</diV>
</el-card>
</div>
</div>
<!-- 内容区第二行 -->
<div>
<div style="width: 100%; padding: 15px">
<div class="twoMain" style="">数据概览</div>
<!-- 数据概览 -->
<div class="styleMain">
<!-- 数据概览第一行列 -->
<el-row>
<!-- 左侧区域 -->
<el-col :span="12">
<div class="styItem" style="margin-right: 10px">
<!-- 标题头 -->
<div style="display: flex">
<span class="styTitle"></span>
<span style="margin-left: 15px">货源数据</span>
<div>
<!-- 首页布局 -->
<div class="home">
<div style="padding: 15px 60px">
<!-- 第一排 运单统计 -->
<div>
<el-row :gutter="35">
<el-col :span="6" v-for="(item, index) in 4" :key="index">
<div class="firstHeader" style="">
<div style="margin-right: 20px">
<svg
t="1715231902958"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="4452"
width="48"
height="48"
>
<path
d="M 948.64 493.66 L 779.77 319.94 a 39.93 39.93 0 0 0 -28.63 -12.11 h -149.2 v -47.52 A 70.15 70.15 0 0 0 532 190 H 134 a 70.15 70.15 0 0 0 -70 70.31 v 489.12 a 40.09 40.09 0 0 0 40 40.18 h 19.93 C 124 860.53 181.28 918 251.91 918 s 127.89 -57.47 128 -128.39 H 644.4 c 0.1 70.92 57.36 128.39 128 128.39 s 127.89 -57.47 128 -128.39 H 960 V 521.69 a 40.25 40.25 0 0 0 -11.36 -28.03 Z m -648.74 296 a 48 48 0 1 1 -96 0 v -0.17 a 48 48 0 1 1 96 0 c 0.01 0.01 0 0.06 0 0.12 Z m 222.1 -80.4 H 352 a 127.62 127.62 0 0 0 -200.08 0 H 144 V 310.52 a 40.09 40.09 0 0 1 40 -40.17 h 298 a 40.09 40.09 0 0 1 40 40.17 Z m 298.43 80.35 a 48 48 0 1 1 -96 0 v -0.17 a 48 48 0 1 1 96 0 Z M 880 709.17 h -7.65 a 127.62 127.62 0 0 0 -199.94 0 H 602 V 388.1 h 131.71 l 146.3 150 Z"
fill="#999999"
p-id="4453"
></path>
</svg>
</div>
<!--内容区 -->
<div class="styCenter" style="">
<!-- 说明显示 -->
<div class="centerItem">
<div style="display: flex; align-items: center">
<p>司机报价</p>
<i class="el-icon-arrow-right"></i>
</div>
<p>0</p>
</div>
<!-- 说明显示 -->
<div class="centerItem">
<div style="display: flex; align-items: center">
<p>指派/专车</p>
<i class="el-icon-arrow-right"></i>
</div>
<p>0</p>
</div>
<!-- 说明显示 -->
<div class="centerItem">
<div style="display: flex; align-items: center">
<p>货源码货源</p>
<i class="el-icon-arrow-right"></i>
</div>
<p>{{ presetsOrderVO.presetsOrderAmount || 0 }}</p>
<div style="font-size: 14px">
<div>待调度订单</div>
<div style="margin: 3px 0">100{{ index * 3 }}</div>
<div>
较上月
<i class="el-icon-caret-top" style="margin: 0 5px"></i> 12%
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<!-- 第二排 常用功能 -->
<div style="margin-top: 15px; border: 1px solid #00000038">
<el-row>
<el-col :span="24">
<!-- 常用功能 -->
<div class="titleClass">常用功能</div>
<!-- 右侧区域 -->
<el-col :span="12">
<div class="styItem" style="margin-left: 10px">
<!-- 标题头 -->
<div style="display: flex">
<span class="styTitle"></span>
<span style="margin-left: 15px">整车订单</span>
</div>
<!--内容区 -->
<div class="styCenter" style="">
<!-- 说明显示 -->
<div class="centerItem" style="width: 24%">
<div style="display: flex; align-items: center">
<p>运输中订单</p>
<i class="el-icon-arrow-right"></i>
</div>
<p>{{ zzOrderVO.inTransit || 0 }}</p>
</div>
<!-- 说明显示 -->
<div class="centerItem" style="width: 24%">
<div style="display: flex; align-items: center">
<p>紧急订单</p>
<i class="el-icon-arrow-right"></i>
</div>
<p>{{ zzOrderVO.levelUrgency || 0 }}</p>
</div>
<!-- 说明显示 -->
<div class="centerItem" style="width: 24%">
<div style="display: flex; align-items: center">
<p>未发布订单</p>
<i class="el-icon-arrow-right"></i>
</div>
<p>{{ zzOrderVO.notPublished || 0 }}</p>
</div>
<!-- 说明显示 -->
<div class="centerItem" style="width: 24%">
<div style="display: flex; align-items: center">
<p>待接单订单</p>
<i class="el-icon-arrow-right"></i>
</div>
<p>{{ zzOrderVO.pendingOrder || 0 }}</p>
</div>
<!-- 路由跳转 常用页面 -->
<el-row :gutter="35">
<div style="margin: 20px 0" class="container">
<!-- 1 -->
<el-col :span="6">
<div class="twoHeader" style="border-left: none">
<div>
<div style="text-align: center">
<div>
<svg
t="1715233862532"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="5551"
width="48"
height="48"
>
<path
d="M298.666667 341.333333h384v42.666667H298.666667v-42.666667z m0 128h298.666666v42.666667H298.666667v-42.666667z m0 128h298.666666v42.666667H298.666667v-42.666667z m0-469.376C298.666667 104.405333 317.824 85.333333 341.12 85.333333h341.76C706.304 85.333333 725.333333 104.490667 725.333333 127.957333v42.752A42.645333 42.645333 0 0 1 682.88 213.333333H341.12C317.696 213.333333 298.666667 194.176 298.666667 170.709333V127.957333zM170.666667 938.666667h682.666666c23.68 0 42.666667-19.157333 42.666667-42.773334V170.773333C896 147.093333 876.842667 128 853.205333 128h-63.296v42.666667h63.296c0.128 0.106667 0.170667 725.333333 0.128 725.333333H170.666667V170.773333C170.752 170.709333 236.16 170.666667 236.16 170.666667V128H170.752A42.752 42.752 0 0 0 128 170.773333v725.12A42.666667 42.666667 0 0 0 170.666667 938.666667z m170.666666-768h341.333334V128H341.333333v42.666667z"
fill="#3D3D3D"
p-id="5552"
></path>
</svg>
</div>
</div>
<div style="font-size: 14px">
<div>结算模板</div>
</div>
</div>
</div></el-col
>
<!-- 2 -->
<el-col :span="6">
<div class="twoHeader">
<div>
<div style="text-align: center">
<div>
<svg
t="1715233862532"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="5551"
width="48"
height="48"
>
<path
d="M298.666667 341.333333h384v42.666667H298.666667v-42.666667z m0 128h298.666666v42.666667H298.666667v-42.666667z m0 128h298.666666v42.666667H298.666667v-42.666667z m0-469.376C298.666667 104.405333 317.824 85.333333 341.12 85.333333h341.76C706.304 85.333333 725.333333 104.490667 725.333333 127.957333v42.752A42.645333 42.645333 0 0 1 682.88 213.333333H341.12C317.696 213.333333 298.666667 194.176 298.666667 170.709333V127.957333zM170.666667 938.666667h682.666666c23.68 0 42.666667-19.157333 42.666667-42.773334V170.773333C896 147.093333 876.842667 128 853.205333 128h-63.296v42.666667h63.296c0.128 0.106667 0.170667 725.333333 0.128 725.333333H170.666667V170.773333C170.752 170.709333 236.16 170.666667 236.16 170.666667V128H170.752A42.752 42.752 0 0 0 128 170.773333v725.12A42.666667 42.666667 0 0 0 170.666667 938.666667z m170.666666-768h341.333334V128H341.333333v42.666667z"
fill="#3D3D3D"
p-id="5552"
></path>
</svg>
</div>
</div>
<div style="font-size: 14px">
<div>发布运单</div>
</div>
</div>
</div></el-col
>
<!-- 3 -->
<el-col :span="6">
<div class="twoHeader">
<div>
<div style="text-align: center">
<div>
<svg
t="1715233862532"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="5551"
width="48"
height="48"
>
<path
d="M298.666667 341.333333h384v42.666667H298.666667v-42.666667z m0 128h298.666666v42.666667H298.666667v-42.666667z m0 128h298.666666v42.666667H298.666667v-42.666667z m0-469.376C298.666667 104.405333 317.824 85.333333 341.12 85.333333h341.76C706.304 85.333333 725.333333 104.490667 725.333333 127.957333v42.752A42.645333 42.645333 0 0 1 682.88 213.333333H341.12C317.696 213.333333 298.666667 194.176 298.666667 170.709333V127.957333zM170.666667 938.666667h682.666666c23.68 0 42.666667-19.157333 42.666667-42.773334V170.773333C896 147.093333 876.842667 128 853.205333 128h-63.296v42.666667h63.296c0.128 0.106667 0.170667 725.333333 0.128 725.333333H170.666667V170.773333C170.752 170.709333 236.16 170.666667 236.16 170.666667V128H170.752A42.752 42.752 0 0 0 128 170.773333v725.12A42.666667 42.666667 0 0 0 170.666667 938.666667z m170.666666-768h341.333334V128H341.333333v42.666667z"
fill="#3D3D3D"
p-id="5552"
></path>
</svg>
</div>
</div>
<div style="font-size: 14px">
<div>订单管理</div>
</div>
</div>
</div></el-col
>
<!-- 4 -->
<el-col :span="6">
<div class="twoHeader" style="border-right: none">
<div>
<div style="text-align: center">
<div>
<svg
t="1715233862532"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="5551"
width="48"
height="48"
>
<path
d="M298.666667 341.333333h384v42.666667H298.666667v-42.666667z m0 128h298.666666v42.666667H298.666667v-42.666667z m0 128h298.666666v42.666667H298.666667v-42.666667z m0-469.376C298.666667 104.405333 317.824 85.333333 341.12 85.333333h341.76C706.304 85.333333 725.333333 104.490667 725.333333 127.957333v42.752A42.645333 42.645333 0 0 1 682.88 213.333333H341.12C317.696 213.333333 298.666667 194.176 298.666667 170.709333V127.957333zM170.666667 938.666667h682.666666c23.68 0 42.666667-19.157333 42.666667-42.773334V170.773333C896 147.093333 876.842667 128 853.205333 128h-63.296v42.666667h63.296c0.128 0.106667 0.170667 725.333333 0.128 725.333333H170.666667V170.773333C170.752 170.709333 236.16 170.666667 236.16 170.666667V128H170.752A42.752 42.752 0 0 0 128 170.773333v725.12A42.666667 42.666667 0 0 0 170.666667 938.666667z m170.666666-768h341.333334V128H341.333333v42.666667z"
fill="#3D3D3D"
p-id="5552"
></path>
</svg>
</div>
</div>
<div style="font-size: 14px">
<div>司机管理</div>
</div>
</div>
</div></el-col
>
</div>
</div>
</el-row>
</el-col>
</el-row>
</div>
<!-- 数据概览第二行列 -->
<el-row style="margin: 20px 0">
<!-- 左侧区域 -->
<el-col :span="12">
<div class="styItem" style="margin-right: 10px">
<!-- 标题头 -->
<div style="display: flex">
<span class="styTitle"></span>
<span style="margin-left: 15px">异常订单</span>
</div>
<!--内容区 -->
<div class="styCenter" style="">
<!-- 说明显示 -->
<div class="centerItem">
<div style="display: flex; align-items: center">
<p>异常订单总数</p>
<i class="el-icon-arrow-right"></i>
</div>
<p>{{ unusualOrderVO.unusualCount || 0 }}</p>
</div>
<!-- 第三排车辆动态 异常记录 -->
<div style="margin-top: 15px">
<el-row>
<el-col :span="12" style="padding-right: 20px">
<div style="border: 1px solid #00000038">
<!-- 车辆动态 -->
<div class="titleClass" style="">车辆动态</div>
<!-- 说明显示 -->
<div class="centerItem"></div>
<div class="centerItem"></div>
</div>
<!-- 路由跳转 常用页面 -->
<el-row :gutter="35">
<div style="margin: 20px 0" class="">
<!-- 1 -->
<el-col :span="24">
<div class="disflexFirst" style="">
<div class="disflex" style="">
<div style="line-height: 20px">
云A8888 已领取任务
</div>
<div style="line-height: 20px">
2020-05-01 10:00:00
</div>
</div>
</div>
</el-col>
<el-col :span="24">
<div class="disflexFirst" style="">
<div class="disflex" style="">
<div style="line-height: 20px">
云A8888 已领取任务
</div>
<div style="line-height: 20px">
2020-05-01 10:00:00
</div>
</div>
</div>
</el-col>
<el-col :span="24">
<div class="disflexFirst" style="">
<div class="disflex" style="">
<div style="line-height: 20px">
云A8888 已领取任务
</div>
<div style="line-height: 20px">
2020-05-01 10:00:00
</div>
</div>
</div>
</el-col>
</div>
</el-row>
</div>
</el-col>
<!-- 右侧区域 -->
<el-col :span="12">
<div class="styItem" style="margin-left: 10px">
<!-- 标题头 -->
<div style="display: flex">
<span
class="styTitle"
style="background-color: #2196f3"
></span>
<span style="margin-left: 15px">零担订单</span>
</div>
<!--内容区 -->
<div class="styCenter" style="">
<!-- 说明显示 -->
<div class="centerItem">
<div style="display: flex; align-items: center">
<p>已分拨</p>
<i class="el-icon-arrow-right"></i>
</div>
<p>{{ sendingOrderVO.sockSorted || 0 }}</p>
</div>
<el-col :span="12" style="padding-left: 20px">
<div style="border: 1px solid #00000038">
<!-- 异常记录 -->
<div class="titleClass" style="">异常记录</div>
<!-- 说明显示 -->
<div class="centerItem">
<div style="display: flex; align-items: center">
<p>已入库</p>
<i class="el-icon-arrow-right"></i>
</div>
<p>{{ sendingOrderVO.stockIn || 0 }}</p>
<!-- 路由跳转 常用页面 -->
<el-row :gutter="35">
<div style="margin: 20px 0" class="">
<!-- 1 -->
<el-col :span="24">
<div class="disflexFirst" style="">
<div class="disflex" style="">
<div style="line-height: 20px">
云A8888 已领取任务
</div>
<div style="line-height: 20px">
2020-05-01 10:00:00
</div>
</div>
</div>
</el-col>
<el-col :span="24">
<div class="disflexFirst" style="">
<div class="disflex" style="">
<div style="line-height: 20px">
云A8888 已领取任务
</div>
<div style="line-height: 20px">
2020-05-01 10:00:00
</div>
</div>
</div>
</el-col>
<el-col :span="24">
<div class="disflexFirst" style="">
<div class="disflex" style="">
<div style="line-height: 20px">
云A8888 已领取任务
</div>
<div style="line-height: 20px">
2020-05-01 10:00:00
</div>
</div>
</div>
</el-col>
</div>
<!-- 说明显示 -->
<div class="centerItem">
<div style="display: flex; align-items: center">
<p>待入库</p>
<i class="el-icon-arrow-right"></i>
</div>
<p>{{ sendingOrderVO.stockPending || 0 }}</p>
</div>
</div>
</el-row>
</div>
</el-col>
</el-row>
@ -297,134 +287,15 @@
import { webHome, PendingOrderList } from "@/api/home/home.js";
import { encryp } from "@/utils/encryp.js";
import _ from "lodash"; //导入loadsh插件
import QRCode from "qrcodejs2";
// import QRCode from "qrcodejs2";
export default {
name: "Index",
data() {
return {
presetsOrderVO: {},
sendingOrderVO: {},
unusualOrderVO: {},
zzOrderVO: {},
walletVO: {},
// 版本号
version: "3.6.2",
showQrcode: false, //显示二位码
webHomeList: {},
feilUrl: "",
times: null,
stateTime: "下午好",
};
return {};
},
mounted() {
this.getwebHome();
this.feilUrl = PROCESSENV.VUE_APP;
this.getTime();
},
methods: {
// 获取当前时间
getTime() {
let _this = this;
let year = new Date().getFullYear(); //获取当前时间的年份
let month = new Date().getMonth() + 1; //获取当前时间的月份
let day = new Date().getDate(); //获取当前时间的天数
let hours = new Date().getHours(); //获取当前时间的小时
let minutes = new Date().getMinutes(); //获取当前时间的分数
let seconds = new Date().getSeconds(); //获取当前时间的秒数
//当小于 10 的是时候，在前面加 0
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
// 判断当前时间段
if (hours >= 0 && hours <= 10) {
this.stateTime = `早上好!`;
} else if (hours > 10 && hours <= 14) {
this.stateTime = `中午好!`;
} else if (hours > 14 && hours <= 18) {
this.stateTime = `下午好!`;
} else if (hours > 18 && hours <= 24) {
this.stateTime = `晚上好!`;
}
//拼接格式化当前时间
_this.times =
year +
"-" +
month +
"-" +
day +
" " +
hours +
":" +
minutes +
":" +
seconds;
},
//web端首页信息查询
getwebHome() {
let _this = this;
webHome().then((res) => {
_this.webHomeList = res.data;
_this.presetsOrderVO = res.data.presetsOrderVO; //货源总数
_this.sendingOrderVO = res.data.sendingOrderVO; //零担订单
_this.unusualOrderVO = res.data.unusualOrderVO; //异常订单
_this.zzOrderVO = res.data.zzOrderVO; //整车订单
_this.walletVO = res.data.walletVO; //资金
_this.$store.commit("home/SetDeptId", res.data.deptId);
});
},
// getPendingOrderList(deptId) {
// let _this = this;
// PendingOrderList(deptId).then((res) => {
// _this.dataInfo = res.data;
// });
// },
mounted() {},
// 点击二维码小图标
clickQRcode() {
this.showQrcode = !this.showQrcode;
// 如果放大显示二维码--调用显示二维码
if (this.showQrcode) {
console.log();
let depId = this.webHomeList.deptId;
let obj = {
name: "home", //是首页的二维码
deptId: encryp(depId),
};
// 转换成json
let deptId = JSON.stringify(obj);
console.log(deptId, "json");
this.$nextTick(() => {
this.creatQrCode(deptId);
});
}
},
// 生成二维码
creatQrCode(id) {
let _this = this;
this.$nextTick(() => {
_this.qrcode = new QRCode(_this.$refs.qrCodeUrl, {
text: id,
width: 180,
height: 180,
colorDark: "#333",
colorLoght: "transparent",
correctLevel: QRCode.CorrectLevel.H,
});
});
},
},
methods: {},
};
</script>
@ -434,83 +305,41 @@ export default {
min-height: calc(100vh - 84px);
background-color: #e9ecf3;
}
.header {
height: 50px;
width: 100%;
background-color: #fff;
line-height: 50px;
.headerItem {
padding: 0 10px;
display: flex;
justify-content: center;
}
}
.box-card {
width: 49%;
.firstHeader {
display: flex;
border: 1px solid #00000038;
padding: 15px 0;
background-image: linear-gradient(135deg, #e2d1c3 0%, #fdfcfb 100%);
position: relative;
justify-content: center;
}
.fiste {
width: 100%;
padding: 15px;
.twoHeader {
display: flex;
justify-content: space-between;
border-right: 1px solid #00000038;
border-top: 1px solid #00000038;
border-left: 1px solid #00000038;
padding: 15px 0;
justify-content: center;
cursor: pointer;
}
.twoMain {
.titleClass {
width: 100%;
height: 50px;
line-height: 50px;
font-size: 18px;
height: 100%;
background-color: #d5c9c95e;
padding: 10px;
font-size: 13px;
font-weight: bold;
background-color: #fdfcfb;
padding-left: 15px;
}
.styleMain {
width: 100%;
background: linear-gradient(to bottom, #fdfcfb, #e9ecf3);
padding: 0 15px;
.styItem {
background-color: #fff;
padding: 15px 0;
.styTitle {
width: 4px;
height: 22px;
background-color: #f7b500;
}
.styCenter {
display: flex;
justify-content: space-around;
margin: 10px 0;
.centerItem {
width: 30%;
background-color: #fbfdfdb0;
padding-left: 15px;
display: flex;
flex-direction: column;
}
}
}
border-bottom: 1px solid #00000038;
}
.EnterpriseGoods {
background-color: #d1e9ff;
padding: 5px 8px;
border-radius: 5px;
line-height: 30px;
.disflexFirst {
padding: 0 15px 10px 15px;
font-size: 12px;
color: #1890ff;
}
.iconQrcode {
position: absolute;
top: 0;
right: 0;
width: 180px;
height: 180px;
.disflex {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>

Write Preview
Loading…
Cancel
Save