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