dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新10.14

Browse Source
This commit is contained in:
许允枞 2024-10-14 14:24:53 +08:00
parent 3cbed13ed9
commit ee7d0db4c6
1 changed files with 211 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

354
fuintAdmin/src/views/shopowner.vue
View File

@ -2,7 +2,7 @@
<div class="home-index"> <div class="home-index">
<el-carousel height="230px"> <el-carousel height="230px">
<el-carousel-item v-for="(item,index) in bannerList" :key="index"> <el-carousel-item v-for="(item,index) in bannerList" :key="index">
<div class="bannser"> <div class="bannser">-
<img :src="imagePath+item.productImage" alt="" > <img :src="imagePath+item.productImage" alt="" >
</div> </div>
@ -10,7 +10,7 @@
</el-carousel> </el-carousel>
<div class="b-bs"> <div class="b-bs">
<div class="left-box"> <div class="left-box">
<div>核心数据</div> <div class="h-tt">核心数据</div>
<div style="display: flex;justify-content: space-between"> <div style="display: flex;justify-content: space-between">
<div class="san-box"> <div class="san-box">
<div class="r-title">{{ storeTotal.allAmount || 0 }}</div> <div class="r-title">{{ storeTotal.allAmount || 0 }}</div>
@ -36,7 +36,7 @@
<div>通知中心</div> <div>通知中心</div>
<div style="font-size: 12px;color: #BBBBBB;cursor: pointer; display: flex;align-items: center" @click="goList()" >更多 <i class="el-icon-arrow-right"></i> </div> <div style="font-size: 12px;color: #BBBBBB;cursor: pointer; display: flex;align-items: center" @click="goList()" >更多 <i class="el-icon-arrow-right"></i> </div>
</div> </div>
<!-- <div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>--> <!-- <div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>-->
<div class="hang_" v-for="(item,index) in noticeList" :key="index" >【{{ item.notificationType }}】{{ item.templateContent }}</div> <div class="hang_" v-for="(item,index) in noticeList" :key="index" >【{{ item.notificationType }}】{{ item.templateContent }}</div>
<div class="hang_" v-if="this.noticeList.length==0">暂无通知</div> <div class="hang_" v-if="this.noticeList.length==0">暂无通知</div>
</div> </div>
@ -46,7 +46,7 @@
<div class="d-s"> <div class="d-s">
<div class="h-tt" style="margin-right: 15px" >数据看板</div> <div class="h-tt" style="margin-right: 15px" >数据看板</div>
<el-dropdown placement="bottom-start" > <el-dropdown placement="bottom-start" >
<div class="h-anniu" :class="{'q-anniu' : timeShow == false}" @click="timeShow = false ">近一周 <i class="el-icon-arrow-down el-icon--right"></i></div> <div class="h-anniu" :class="{'q-anniu' : timeShow == false}" @click="timeShow = false ">近一周 <i class="el-icon-arrow-down el-icon--right"></i></div>
<el-dropdown-menu slot="dropdown"> <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-item>昨日</el-dropdown-item>
@ -56,12 +56,10 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<div class="h-anniu" :class="{'q-anniu' : timeShow == true}" @click="timeShow = true" > <img src="../assets/images/zdy.png" style="width: 14px; height: 14px" > 自定义</div> <div class="h-anniu" :class="{'q-anniu' : timeShow == true}" @click="timeShow = true" > <img src="../assets/images/zdy.png" style="width: 14px; height: 14px" > 自定义</div>
<div class="h-tt">数据看板</div>
<div class="q-anniu">近一周</div>
<div style="margin-right: 40px"> <div style="margin-right: 40px">
<el-date-picker <el-date-picker
v-model="value1" v-model="value1"
type="datetimerange" type="daterange"
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
@ -74,28 +72,28 @@
<div class="k-box"> <div class="k-box">
<div class="d-s" style="font-size: 12px;color: #999999;"> <div class="d-s" style="font-size: 12px;color: #999999;">
<div class="sian"></div> <div class="sian"></div>
<div>油品销售金额（元）/交易笔数</div> <div style="color: #333">油品销售金额（元）/交易笔数</div>
</div> </div>
<div class="num-size">{{ storeAmount.oilAmount || 0 }}/{{ storeAmount.oilNum || 0 }}</div> <div class="num-size">{{ storeAmount.oilAmount || 0 }}/{{ storeAmount.oilNum || 0 }}</div>
</div> </div>
<div class="k-box"> <div class="k-box">
<div class="d-s" style="font-size: 12px;color: #999999;"> <div class="d-s" style="font-size: 12px;color: #999999;">
<div class="sian"></div> <div class="sian"></div>
<div>会员充值金额（元）/充值笔数</div> <div style="color: #333">会员充值金额（元）/充值笔数</div>
</div> </div>
<div class="num-size">{{ storeAmount.userRechargeAmount || 0 }}/{{ storeAmount.userRechargeNum || 0 }}</div> <div class="num-size">{{ storeAmount.userRechargeAmount || 0 }}/{{ storeAmount.userRechargeNum || 0 }}</div>
</div> </div>
<div class="k-box"> <div class="k-box">
<div class="d-s" style="font-size: 12px;color: #999999;"> <div class="d-s" style="font-size: 12px;color: #999999;">
<div class="sian"></div> <div class="sian"></div>
<div>便利店销售金额（元）/交易笔数</div> <div style="color: #333">便利店销售金额（元）/交易笔数</div>
</div> </div>
<div class="num-size">{{ storeAmount.minimartAmount || 0 }}/{{ storeAmount.minimartNum || 0 }}</div> <div class="num-size">{{ storeAmount.minimartAmount || 0 }}/{{ storeAmount.minimartNum || 0 }}</div>
</div> </div>
<div class="k-box"> <div class="k-box">
<div class="d-s" style="font-size: 12px;color: #999999;"> <div class="d-s" style="font-size: 12px;color: #999999;">
<div class="sian"></div> <div class="sian"></div>
<div>积分商城销售金额（元）/兑换笔数</div> <div style="color: #333">积分商城销售金额（元）/兑换笔数</div>
</div> </div>
<div class="num-size">{{ storeAmount.pointMallAmount || 0 }}/{{ storeAmount.pointMallNum || 0 }}</div> <div class="num-size">{{ storeAmount.pointMallAmount || 0 }}/{{ storeAmount.pointMallNum || 0 }}</div>
</div> </div>
@ -108,7 +106,7 @@
</div> </div>
<div class="h-r-ba"></div> <div class="h-r-ba"></div>
<div> <div>
<!-- <div class="h-tt" >活跃油站</div>--> <!-- <div class="h-tt" >活跃油站</div>-->
<div class="d-s" style="justify-content: space-between"> <div class="d-s" style="justify-content: space-between">
<div id="cccc" style="width: 300px;height: 200px;margin-right: 50px"></div> <div id="cccc" style="width: 300px;height: 200px;margin-right: 50px"></div>
<div id="ccct" style="width: 300px;height: 200px;"></div> <div id="ccct" style="width: 300px;height: 200px;"></div>
@ -127,7 +125,7 @@
content="联系电话：1352415811"> content="联系电话：1352415811">
<img slot="reference" style="width: 28px; height: 28px " src="../assets/images/telindex.png"> <img slot="reference" style="width: 28px; height: 28px " src="../assets/images/telindex.png">
</el-popover> </el-popover>
</div> </div>
<div style="height: 90%;overflow: auto;scrollbar-width: none;"> <div style="height: 90%;overflow: auto;scrollbar-width: none;">
<div class="d-s" style="margin: 30px 0px" v-for="(item,index) in hardwareList" :key="index" > <div class="d-s" style="margin: 30px 0px" v-for="(item,index) in hardwareList" :key="index" >
<div class="r-img"> <div class="r-img">
@ -135,30 +133,66 @@
</div> </div>
<div style="font-size: 14px">{{ item.name }}</div> <div style="font-size: 14px">{{ item.name }}</div>
</div> </div>
<div>{{ item.name }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="b-bs"> <div class="b-bs">
<div class="left-box-t"> <div class="left-box-t">
<div>数据展示</div> <div class="d-s">
<div class="h-tt" style="margin-right: 15px" >油品交易分析</div>
<el-dropdown placement="bottom-start" >
<div class="h-anniu" :class="{'q-anniu' : timeShow == false}" @click="timeShow = false ">近一周 <i class="el-icon-arrow-down el-icon--right"></i></div>
<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-item>近一月</el-dropdown-item>
<el-dropdown-item>近一周</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="h-anniu" :class="{'q-anniu' : timeShow == true}" @click="timeShow = true" > <img src="../assets/images/zdy.png" style="width: 14px; height: 14px" > 自定义</div>
<div style="margin-right: 40px">
<el-date-picker
v-model="value1"
type="daterange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@blur="getStoreAmount">
</el-date-picker>
</div>
</div>
</div> </div>
<div class="right-box-t"> <div class="right-box-t">
<div style="font-size: 16px;font-weight: bold">员工排行</div> <div style="font-size: 16px;font-weight: bold"><span style="margin-right: 15px">员工排行</span> <el-dropdown placement="bottom-start" >
<div class="h-anniu" :class="{'q-anniu' : timeShow == false}" @click="timeShow = false ">近一周 <i class="el-icon-arrow-down el-icon--right"></i></div>
<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-item>近一月</el-dropdown-item>
<el-dropdown-item>近一周</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown></div>
<div class="hui-box"> <div class="hui-box">
<div style="width: 10%">排名</div> <div style="width: 10%">排名</div>
<div>员工姓名</div> <div>员工姓名</div>
<div style="width: 25%">会员充值金额（元)</div> <div style="width: 25%">会员充值金额</div>
<div style="width: 25%">油品销售金额（元)</div> <div style="width: 25%">油品销售金额</div>
<div>总销售额（元）</div> <div>总销售额</div>
</div> </div>
<div class="hang-box" v-for="(item,index) in employeList" :key="index"> <div style="overflow: auto; scrollbar-width: none; height: 74% ">
<div style="width: 10%">{{index +1}}</div> <div class="hang-box" v-for="(item,index) in employeList" :key="index">
<div>{{ item.realName }}</div> <div style="width: 10%">{{index +1}}</div>
<div style="width: 25%">{{item.cardSum}}</div> <div>{{ item.realName }}</div>
<div style="width: 25%">{{item.oilSum}}</div> <div style="width: 25%">{{item.cardSum}}</div>
<div>{{item.totalSum}}</div> <div style="width: 25%">{{item.oilSum}}</div>
<div>{{item.totalSum}}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="bottom_"> <div class="bottom_">
@ -256,7 +290,7 @@ export default {
created() { created() {
let nowDate = new Date(); let nowDate = new Date();
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000) let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
this.value1 = [parseTime(oneWeekAgo),parseTime(nowDate)] this.value1 = [parseTime(oneWeekAgo), parseTime(nowDate)]
this.getStoreTotal() this.getStoreTotal()
// this.selectChildByDeptIdApi() // this.selectChildByDeptIdApi()
this.getStoreAmount() this.getStoreAmount()
@ -266,13 +300,11 @@ export default {
start.setMinutes(0) start.setMinutes(0)
start.setSeconds(0) start.setSeconds(0)
start.setMilliseconds(0) start.setMilliseconds(0)
this.value2 = [start,new Date()]; this.value2 = [start, new Date()];
this.getStoreList() this.getStoreList()
this.getHardwareList() this.getHardwareList()
this.getNoticeList() this.getNoticeList()
this.getEmployeList() this.getEmployeList()
this.getDataAnalysis()
this.getDataShow()
}, },
mounted() { mounted() {
// this.initChart() // this.initChart()
@ -281,43 +313,12 @@ export default {
goList() { goList() {
this.$router.push('/notificationList/index') this.$router.push('/notificationList/index')
}, },
// 获取数据分析信息
getDataAnalysis() {
getDataAnalysis().then(res => {
console.log('数据分析的数据',res)
if (res.code == 200) {
for (let i = 0; i < res.data.length; i++) {
if (res.data[i].type == 1) {
this.dataAnalysisOilNumberList.push(res.data[i])
}else if (res.data[i].type == 2) {
this.dataAnalysisIfOilList.push(res.data[i])
}else if (res.data[i].type == 3) {
this.dataAnalysisAllList.push(res.data[i])
}
}
console.log('dataAnalysisOilNumberList',this.dataAnalysisOilNumberList)
console.log('dataAnalysisIfOilList',this.dataAnalysisIfOilList)
console.log('dataAnalysisAllList',this.dataAnalysisAllList)
this.initChart()
}
})
},
//获取数据展示
getDataShow(){
const a = {
startTime: "2024-01-01",
endTime: "2024-11-01",
}
getDataShow(a).then(res => {
console.log('数据展示的数据',res)
})
},
// 获取员工排行信息 // 获取员工排行信息
getEmployeList() { getEmployeList() {
this.employeLoading = true this.employeLoading = true
employeeSalesApi().then(res=>{ employeeSalesApi().then(res => {
if(res.code == 200) { if (res.code == 200) {
if (res.data.length >=10) { if (res.data.length >= 10) {
this.employeList = res.data.slice(0, 10); this.employeList = res.data.slice(0, 10);
} else { } else {
this.employeList = res.data this.employeList = res.data
@ -328,45 +329,45 @@ export default {
}) })
}, },
getNoticeList(){ getNoticeList() {
getNotificationlogList({pageNo: 1, pageSize: 4}).then(res => { getNotificationlogList({pageNo: 1, pageSize: 4}).then(res => {
this.noticeList = res.data.records this.noticeList = res.data.records
}) })
}, },
getHardwareList(){ getHardwareList() {
getListApi({page: 1, pageSize: 3,status:'1'}).then(res=>{ getListApi({page: 1, pageSize: 3, status: '1'}).then(res => {
this.hardwareList = res.data.records; this.hardwareList = res.data.records;
this.hardwareList.forEach(item => { this.hardwareList.forEach(item => {
if (item.image.includes(",")){ if (item.image.includes(",")) {
item.image = item.image.split(",")[0] item.image = item.image.split(",")[0]
} }
}) })
}) })
}, },
getStoreList(){ getStoreList() {
selectStoreAmount(this.addDateRange({},this.value2)).then(res => { selectStoreAmount(this.addDateRange({}, this.value2)).then(res => {
this.storeList = res.data this.storeList = res.data
this.initChart() this.initChart()
}) })
}, },
// 选择机构信息 // 选择机构信息
chooseDept(){ chooseDept() {
this.options.forEach(item => { this.options.forEach(item => {
if (item.deptId == this.value){ if (item.deptId == this.value) {
this.queryParams.ancestors = item.ancestors this.queryParams.ancestors = item.ancestors
} }
}) })
this.getStoreAmount() this.getStoreAmount()
}, },
// banner图 // banner图
selectBannerList(){ selectBannerList() {
let queryParams = { let queryParams = {
pageNo:1, pageNo: 1,
pageSize:10, pageSize: 10,
systemPosition:"首页", systemPosition: "首页",
bannerStatus:true bannerStatus: true
} }
getBannerListApi(queryParams).then(res=>{ getBannerListApi(queryParams).then(res => {
this.bannerList = res.data.records this.bannerList = res.data.records
}) })
}, },
@ -377,28 +378,28 @@ export default {
}) })
}, },
// 核心数据 // 核心数据
getStoreTotal(){ getStoreTotal() {
getTotalAmount().then(res => { getTotalAmount().then(res => {
this.storeTotal = res.data this.storeTotal = res.data
}) })
}, },
getStoreAmount(){ getStoreAmount() {
getDataBoard(this.addDateRange(this.queryParams,this.value1)).then(res => { getDataBoard(this.addDateRange(this.queryParams, this.value1)).then(res => {
this.storeAmount = res.data this.storeAmount = res.data
this.initChart() this.initChart()
}) })
}, },
countPercentage(upNum,downNum){ countPercentage(upNum, downNum) {
let percentage = 0; let percentage = 0;
percentage = (upNum / downNum)*100 percentage = (upNum / downNum) * 100
return percentage.toFixed(2) return percentage.toFixed(2)
}, },
initChart() { initChart() {
const chart = echarts.init(document.getElementById('ccc')) const chart = echarts.init(document.getElementById('ccc'))
const chart1 = echarts.init(document.getElementById('cccc')) const chart1 = echarts.init(document.getElementById('cccc'))
const chart2= echarts.init(document.getElementById('ccct')) const chart2 = echarts.init(document.getElementById('ccct'))
const chart3= echarts.init(document.getElementById('ctct')) const chart3 = echarts.init(document.getElementById('ctct'))
const chart4= echarts.init(document.getElementById('cccf')) const chart4 = echarts.init(document.getElementById('cccf'))
let dataList = [] let dataList = []
let allTotal = 0 let allTotal = 0
if (this.storeAmount.oilNameList) { if (this.storeAmount.oilNameList) {
@ -419,7 +420,7 @@ export default {
let rechargeBalanceList = [] let rechargeBalanceList = []
let consumeBalanceList = [] let consumeBalanceList = []
let userBalanceList = [] let userBalanceList = []
if (this.storeList.length>0) { if (this.storeList.length > 0) {
this.storeList.forEach(item => { this.storeList.forEach(item => {
storeNameList.push(item.storeName) storeNameList.push(item.storeName)
oilAmountList.push(item.oilAmount) oilAmountList.push(item.oilAmount)
@ -484,8 +485,14 @@ export default {
data: [ data: [
// { value: 28, name: '28%' }, // { value: 28, name: '28%' },
// { value: 72, name: '72%' }, // { value: 72, name: '72%' },
{ value: this.countPercentage(Number(this.storeAmount.oilNum),Number(this.storeAmount.oilNum)+Number(this.storeAmount.noOilNum)), name: "油品交易占比" }, {
{ value: this.countPercentage(Number(this.storeAmount.noOilNum),Number(this.storeAmount.oilNum)+Number(this.storeAmount.noOilNum)), name: "非油品交易占比" }, value: this.countPercentage(Number(this.storeAmount.oilNum), Number(this.storeAmount.oilNum) + Number(this.storeAmount.noOilNum)),
name: "油品交易占比"
},
{
value: this.countPercentage(Number(this.storeAmount.noOilNum), Number(this.storeAmount.oilNum) + Number(this.storeAmount.noOilNum)),
name: "非油品交易占比"
},
], ],
emphasis: { emphasis: {
@ -519,10 +526,22 @@ export default {
// { value: 72, name: '积分商城交易占比' }, // { value: 72, name: '积分商城交易占比' },
// { value: 28, name: '油品交易占比' }, // { value: 28, name: '油品交易占比' },
// { value: 72, name: '便利店交易占比' }, // { value: 72, name: '便利店交易占比' },
{ value: this.countPercentage(Number(this.storeAmount.userNum),Number(this.storeAmount.oilNum)+Number(this.storeAmount.userNum)+Number(this.storeAmount.integralNum)+Number(this.storeAmount.goodNum)), name: '会员充值占比' }, {
{ value: this.countPercentage(Number(this.storeAmount.integralNum),Number(this.storeAmount.oilNum)+Number(this.storeAmount.userNum)+Number(this.storeAmount.integralNum)+Number(this.storeAmount.goodNum)), name: '积分商城交易占比' }, value: this.countPercentage(Number(this.storeAmount.userNum), Number(this.storeAmount.oilNum) + Number(this.storeAmount.userNum) + Number(this.storeAmount.integralNum) + Number(this.storeAmount.goodNum)),
{ value: this.countPercentage(Number(this.storeAmount.oilNum),Number(this.storeAmount.oilNum)+Number(this.storeAmount.userNum)+Number(this.storeAmount.integralNum)+Number(this.storeAmount.goodNum)), name: '油品交易占比' }, name: '会员充值占比'
{ value: this.countPercentage(Number(this.storeAmount.goodNum),Number(this.storeAmount.oilNum)+Number(this.storeAmount.userNum)+Number(this.storeAmount.integralNum)+Number(this.storeAmount.goodNum)), name: '便利店交易占比' }, },
{
value: this.countPercentage(Number(this.storeAmount.integralNum), Number(this.storeAmount.oilNum) + Number(this.storeAmount.userNum) + Number(this.storeAmount.integralNum) + Number(this.storeAmount.goodNum)),
name: '积分商城交易占比'
},
{
value: this.countPercentage(Number(this.storeAmount.oilNum), Number(this.storeAmount.oilNum) + Number(this.storeAmount.userNum) + Number(this.storeAmount.integralNum) + Number(this.storeAmount.goodNum)),
name: '油品交易占比'
},
{
value: this.countPercentage(Number(this.storeAmount.goodNum), Number(this.storeAmount.oilNum) + Number(this.storeAmount.userNum) + Number(this.storeAmount.integralNum) + Number(this.storeAmount.goodNum)),
name: '便利店交易占比'
},
], ],
emphasis: { emphasis: {
@ -547,7 +566,7 @@ export default {
} }
}, },
legend: { legend: {
data: ['Evaporation','油品交易额','非油品交易额', '会员充值金额','会员消费金额', '会员余额'] data: ['Evaporation', '油品交易额', '非油品交易额', '会员充值金额', '会员消费金额', '会员余额']
}, },
xAxis: [ xAxis: [
{ {
@ -702,7 +721,7 @@ export default {
} }
}, },
legend: { legend: {
data: ['Evaporation','油品交易额','非油品交易额', '会员充值金额','会员消费金额', '会员余额'] data: ['Evaporation', '油品交易额', '非油品交易额', '会员充值金额', '会员消费金额', '会员余额']
}, },
xAxis: [ xAxis: [
{ {
@ -861,34 +880,39 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.app-container{ .app-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #f4f5f9; background: #f4f5f9;
} }
.d-s{
.d-s {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.bannser{
.bannser {
width: 100%; width: 100%;
height: 230px; height: 230px;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
img{
img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.b-bs{
.b-bs {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: 15px; margin-top: 15px;
} }
.left-box{
.left-box {
width: 74%; width: 74%;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px;
@ -900,7 +924,8 @@ export default {
box-sizing: border-box; box-sizing: border-box;
padding: 15px; padding: 15px;
} }
.left-box-t{
.left-box-t {
width: 74%; width: 74%;
box-sizing: border-box; box-sizing: border-box;
padding: 15px; padding: 15px;
@ -910,7 +935,8 @@ export default {
height: 380px; height: 380px;
} }
.right-box{
.right-box {
width: 25%; width: 25%;
border-radius: 8px; border-radius: 8px;
background: #fff; background: #fff;
@ -919,7 +945,8 @@ export default {
box-sizing: border-box; box-sizing: border-box;
padding: 15px; padding: 15px;
} }
.right-box-t{
.right-box-t {
width: 25%; width: 25%;
border-radius: 8px; border-radius: 8px;
background: #fff; background: #fff;
@ -927,32 +954,36 @@ export default {
height: 380px; height: 380px;
box-sizing: border-box; box-sizing: border-box;
padding: 15px; padding: 15px;
overflow: auto;
scrollbar-width: none;
} }
.san-box{
.san-box {
width: 24%; width: 24%;
height: 120px; height: 100px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 8px; border-radius: 8px;
background: #fe8c4a; background: #fe8c4a;
margin: 15px 0px; margin: 15px auto;
margin-right: 15px;
box-sizing: border-box; box-sizing: border-box;
padding: 20px 40px; padding: 20px 40px;
} }
.r-title{
.r-title {
font-weight: bold; font-weight: bold;
font-size: 42px; font-size: 42px;
color: #FFFFFF; color: #FFFFFF;
text-align: center; text-align: center;
} }
.r-size{
.r-size {
font-size: 14px; font-size: 14px;
color: #FFFFFF; color: #FFFFFF;
text-align: center; text-align: center;
} }
.title_{
.title_ {
font-size: 16px; font-size: 16px;
color: #333333; color: #333333;
font-weight: bold; font-weight: bold;
@ -961,82 +992,109 @@ export default {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
} }
.hang_{
.hang_ {
width: 100%; width: 100%;
white-space: nowrap; //不换行 white-space: nowrap; //不换行
overflow: hidden; //超出部分隐藏 overflow: hidden; //超出部分隐藏
text-overflow: ellipsis; //文本溢出显示省略号 text-overflow: ellipsis; //文本溢出显示省略号
font-size: 14px; font-size: 14px;
color: #777777; color: #333;
margin: 14px auto; margin: 14px auto;
} }
.h-tt{
.h-tt {
font-size: 16px; font-size: 16px;
color: #333333; color: #333333;
font-weight: bold; font-weight: bold;
margin-right: 40px; display: flex;
justify-content: space-between;
} }
.q-anniu{
.q-anniu {
width: 80px; width: 80px;
height: 26px; height: 26px;
background: #FF9655; background: #FF9655 !important;
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #fff; color: #fff !important;
font-size: 12px;
cursor: pointer; cursor: pointer;
margin-right: 20px; margin-right: 20px;
} }
.k-box{ .h-anniu {
width: 220px; width: 80px;
height: 26px;
background: #fafafa;
border-radius: 4px 4px 4px 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-right: 20px;
font-weight: 400;
font-size: 12px;
color: #555555;
}
.k-box {
width: 24%;
height: 68px; height: 68px;
background: #FFFFFF; background: #FFFFFF;
border-radius: 8px; border-radius: 8px;
border: 1px solid #e1e0e0; border: 1px solid #e1e0e0;
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto;
padding: 10px; padding: 10px;
margin-right: 10px;
} }
.num-size{
.num-size {
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 24px;
color: #555555; color: #555555;
} }
.sian{
.sian {
width: 6px; width: 6px;
height: 6px; height: 6px;
background: #2BBCFF; background: #2BBCFF;
border-radius: 50%; border-radius: 50%;
margin-right: 5px; margin-right: 5px;
} }
.hui-hang{
.hui-hang {
width: 100%; width: 100%;
height: 5px; height: 5px;
background: #F4F5F9; background: #F4F5F9;
margin: 15px auto; margin: 15px auto;
} }
.h-r-ba{
.h-r-ba {
height: 170px; height: 170px;
margin: 0px 50px; margin: 0px 50px;
width: 5px; width: 5px;
background: #f4f5f9; background: #f4f5f9;
} }
.r-img{
.r-img {
width: 84px; width: 84px;
height: 70px; height: 70px;
margin-right: 20px; margin-right: 20px;
} }
.bottom_{
.bottom_ {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
background: #fff; background: #fff;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 20px;
margin-top: 20px; margin-top: 20px;
} }
.anniu-h{
.anniu-h {
width: 80px; width: 80px;
height: 26px; height: 26px;
background: #FAFAFA; background: #FAFAFA;
@ -1048,49 +1106,59 @@ export default {
color: #777777; color: #777777;
margin-right: 20px; margin-right: 20px;
} }
.anniu-act{
.anniu-act {
background: #FF9655 !important; background: #FF9655 !important;
border: 1px solid #FF9655 !important; border: 1px solid #FF9655 !important;
color: #fff; color: #fff;
} }
.la-left{
.la-left {
width: 73%; width: 73%;
background: #fff; background: #fff;
border-radius: 10px; border-radius: 10px;
} }
.la-right{
.la-right {
height: 25%; height: 25%;
background: #fff; background: #fff;
border-radius: 10px; border-radius: 10px;
} }
.hui-box{
.hui-box {
background: #F4F5F9; background: #F4F5F9;
border-radius: 8px; border-radius: 8px;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
display: flex; display: flex;
font-size: 14px;
justify-content: space-between; justify-content: space-between;
margin: 10px auto; margin: 10px auto;
div{
div {
width: 20%; width: 20%;
text-align: center; text-align: center;
} }
} }
.hang-box{
.hang-box {
border-radius: 8px; border-radius: 8px;
font-size: 14px;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 5px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 10px auto; margin: 0px auto;
div{
div {
width: 20%; width: 20%;
text-align: center; text-align: center;
} }
} }
.home-index{
.home-index {
} }
</style> </style>