zmt
4 years ago
11 changed files with 1146 additions and 37 deletions
-
12src/pages.json
-
7src/subpackage/device/js/device_api.js
-
8src/subpackage/device/pages/index/index.vue
-
470src/subpackage/device/pages/index/lot_manage.vue
-
445src/subpackage/device/pages/index/router_manage.vue
-
77src/subpackage/device/pages/switch_manage/switch_manage.vue
-
164src/subpackage/device/pages/timing/timing_setting.vue
-
BINsrc/subpackage/device/static/images/devices/16.png
-
BINsrc/subpackage/device/static/images/devices/17.png
-
BINsrc/subpackage/device/static/images/devices/18.png
-
BINsrc/subpackage/device/static/images/devices/19.png
@ -0,0 +1,470 @@ |
|||
<template> |
|||
<view class="t-router-page"> |
|||
<!-- <store-name></store-name> --> |
|||
<view class="t-title">物联卡管理 |
|||
<view class="t-reset" @click="updateList">更新 |
|||
<image src="../../static/images/refresh.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="t-update"> |
|||
更新时间: {{update_time}} |
|||
</view> |
|||
|
|||
<!-- <view class="t-map" v-if="covers.length>0"> |
|||
<map style="width: 100%; height: 250px;" :latitude="latitude" :longitude="longitude" :markers="covers"> |
|||
</map> |
|||
</view> --> |
|||
|
|||
<view class="t-box"> |
|||
<view class="info-list"> |
|||
<view class="i-item" v-for="(item,index) in infoObj"> |
|||
<view class="i-box">{{item.name}}</view> |
|||
<rich-text class="i-box" :nodes="item.value"></rich-text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '../../../../utils/util'; |
|||
import store_name from '../../components/store_name/store_name'; |
|||
import deviceServer from '../../js/device_server'; |
|||
import deviceApi from '../../js/device_api'; |
|||
|
|||
const rootPage = '/subpackage/device' |
|||
|
|||
// 参数参考: https://support.huaweicloud.com/api-ocgsl/gsl_07_0008.html |
|||
const infoObj = [ |
|||
{ |
|||
key:"act_date", |
|||
value:"", |
|||
name:"在线时间", |
|||
key2:"" |
|||
}, |
|||
{ |
|||
key:"order_id", |
|||
value:"", |
|||
name:"批次号", |
|||
key2:"" |
|||
}, |
|||
{ |
|||
key:"flow_left", |
|||
value:"", |
|||
name:"剩余流量(单位M)", |
|||
key2:"" |
|||
}, |
|||
|
|||
{ |
|||
key:"flow_used", |
|||
value:"", |
|||
name:"已用流量(单位M)", |
|||
key2:"" |
|||
},{ |
|||
key:"sim_type", |
|||
value:"", |
|||
name:"sim卡类型", |
|||
key2:"", //当key2,存在时,value为data[key][key2] |
|||
typeArr:[,"vSIM","eSIM","实体卡"], //当typeArr,value 存在时, value为typeArr[value] |
|||
},{ |
|||
key:"sim_status", |
|||
value:"", |
|||
name:"sim卡状态", |
|||
key2:"", //当key2,存在时,value为data[key][key2] |
|||
typeArr:{ |
|||
"11":"未激活", |
|||
"13":"可激活", |
|||
"14":"已停用", |
|||
"20":"在用" |
|||
}, //当typeArr,value 存在时, value为typeArr[value] |
|||
},{ |
|||
key:"signal_level", |
|||
value:"", |
|||
name:"信号等级", |
|||
key2:"", |
|||
typeArr:["未知","差","良","良","优"] |
|||
},{ |
|||
key:"price_plan_name", |
|||
value:"", |
|||
name:"在用套餐名", |
|||
key2:"", |
|||
},{ |
|||
key:"real_named", |
|||
value:"", |
|||
name:"是否已实名认证", |
|||
key2:"", |
|||
},{ |
|||
key:"sim_price_plan_id", |
|||
value:"", |
|||
name:"套餐订购实例ID", |
|||
key2:"", |
|||
},{ |
|||
key:"tag_names", |
|||
value:"", |
|||
name:"标签名", |
|||
key2:"", |
|||
},{ |
|||
key:"sim_card_id", |
|||
value:"", |
|||
name:"sim卡id", |
|||
key2:"" |
|||
},{ |
|||
key:"cid", |
|||
value:"", |
|||
name:"cid", |
|||
key2:"" |
|||
},{ |
|||
key:"imei", |
|||
value:"", |
|||
name:"imei", |
|||
key2:"" |
|||
},{ |
|||
key:"imsi", |
|||
value:"", |
|||
name:"imsi", |
|||
key2:"" |
|||
},{ |
|||
key:"iccid", |
|||
value:"", |
|||
name:"iccid", |
|||
key2:"" |
|||
},{ |
|||
key:"msisdn", |
|||
value:"", |
|||
name:"msisdn", |
|||
key2:"" |
|||
},{ |
|||
key:"network_type", |
|||
value:"", |
|||
name:"网络类型", |
|||
key2:"" |
|||
},{ |
|||
key:"node_id", |
|||
value:"", |
|||
name:"设备标识", |
|||
key2:"" |
|||
},{ |
|||
key:"operator_status", |
|||
value:"", |
|||
name:"运营商状态", |
|||
key2:"", |
|||
typeArr:["非停机","停机（超流量停机）" ,"停机（超流量阈值停机）" ,"停机（流量池停机）" ,"停机（套餐到期停机）","停机（主动停机）","停机（违规停机）"] |
|||
},{ |
|||
key:"device_status", |
|||
value:"", |
|||
name:"iccid", |
|||
key2:"", |
|||
typeArr:["未知", "注册", "重启", "在线", "离线"] |
|||
},{ |
|||
key:"cut_net_flag", |
|||
value:"", |
|||
name:"是否单独断网", |
|||
key2:"" |
|||
},{ |
|||
key:"exceed_cut_net_flag", |
|||
value:"", |
|||
name:"是否达量断网", |
|||
key2:"" |
|||
},{ |
|||
key:"exceed_cut_net_quota", |
|||
value:"", |
|||
name:"达量断网阈值(单位MB)", |
|||
key2:"" |
|||
},{ |
|||
key:"imei_bind_remain_times", |
|||
value:"", |
|||
name:"本月机卡绑定剩余次数", |
|||
key2:"" |
|||
},{ |
|||
key:"speed_value", |
|||
value:"", |
|||
name:"网络限制速率(单位Kbps)", |
|||
key2:"" |
|||
},{ |
|||
key:"exceed_cut_net_quota", |
|||
value:"", |
|||
name:"达量断网阈值(单位MB)", |
|||
key2:"" |
|||
},{ |
|||
key:"expire_time", |
|||
value:"", |
|||
name:"过期时间", |
|||
key2:"" |
|||
},{ |
|||
key:"dbm", |
|||
value:"", |
|||
name:"信号强度", |
|||
key2:"" |
|||
},{ |
|||
key:"device_model", |
|||
value:"", |
|||
name:"设备模组", |
|||
key2:"" |
|||
} |
|||
]; |
|||
import { |
|||
mapState |
|||
} from 'vuex' |
|||
export default { |
|||
components: { |
|||
'store-name': store_name |
|||
}, |
|||
computed: { |
|||
...mapState({ |
|||
storeList: state => state.device.storeList, |
|||
curStoreInfo: state => state.device.curStoreInfo, |
|||
}), |
|||
isDel() { |
|||
return (item) => { |
|||
return item[2] == "删除" ? "true" : "" |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
infoObj, |
|||
latitude: 23.2174411, |
|||
longitude: 113.3048267, |
|||
update_time:new Date(), |
|||
covers: [ |
|||
], |
|||
} |
|||
}, |
|||
async onLoad(opts) { |
|||
console.log("opts:",opts); |
|||
this.mac = opts.mac; |
|||
this.updateList() |
|||
// try { |
|||
// util.showLoad(); |
|||
// let _brandInfo = await this.$store.dispatch('getBrandInfo'); |
|||
// await this.$store.dispatch('getStoreList'); |
|||
// util.hideLoad(); |
|||
// } catch (err) { |
|||
// util.hideLoad(); |
|||
// } |
|||
|
|||
}, |
|||
onShow() { |
|||
// this.updateList() //更新中控信息 |
|||
}, |
|||
watch: { |
|||
// curStoreInfo(newVal, oldVal){ |
|||
// this.infoArr.length = 1 |
|||
// this.updateList() |
|||
// } |
|||
}, |
|||
methods: { |
|||
clickReboot(){ |
|||
let that = this |
|||
uni.showModal({ |
|||
content: `更新信息 ?`, |
|||
success(res) { |
|||
console.log("确认", res.confirm) |
|||
if(res.confirm){ |
|||
that.reboot4G() |
|||
} |
|||
}, |
|||
}) |
|||
}, |
|||
reboot4G(){ |
|||
util.showLoad(); |
|||
deviceServer.post({ |
|||
url: deviceApi.reboot4G, |
|||
data: { |
|||
mac:this.mac |
|||
}, |
|||
isDefaultGet: false, |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
if (res.data.code == 0) { |
|||
util.showNone(res.data.message || '操作成功！'); |
|||
} else { |
|||
util.showNone(res.data.message || '操作失败！'); |
|||
} |
|||
}) |
|||
.catch(err => { |
|||
util.hideLoad() |
|||
}) |
|||
}, |
|||
async updateList() { |
|||
let that = this |
|||
if(!this.mac)return |
|||
util.showLoad(); |
|||
deviceServer.post({ |
|||
url: deviceApi.getLotDetail, |
|||
data: { |
|||
iccid:this.mac, |
|||
is_sync:0 |
|||
}, |
|||
isDefaultGet: false, |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
if (res.data.code == 0) { |
|||
that.filterRouterData(res.data.data) |
|||
} else { |
|||
util.showNone(res.data.message || '操作失败！'); |
|||
} |
|||
}) |
|||
.catch(err => { |
|||
util.hideLoad() |
|||
}) |
|||
|
|||
}, |
|||
//过滤路由数据 |
|||
filterRouterData(data){ |
|||
console.log("filterRouterData:",data); |
|||
let obj = this.infoObj |
|||
for(var i in obj){ |
|||
let e = obj[i] |
|||
let res = data[e.key] |
|||
if(res==="undefined")res = "未知状态1" |
|||
if(res==="")res = "未知状态2" //写个未知状态({状态值}) 字段没有还是数值没有 |
|||
console.log(888888,res); |
|||
// if(res==="undefined"||res==="") continue |
|||
e.value = (typeof(res)=="object")?data[e.key][e.key2]:res; |
|||
e.value = e.value.toString(); |
|||
if(e.typeArr&&e.value)e.value = e.typeArr[e.value]; |
|||
if(e.value=== "false")e.value = "否"; |
|||
if(e.value=== "true")e.value = "是"; |
|||
// if(e.value===0)e.value = "0"; |
|||
console.log(e.value); |
|||
} |
|||
|
|||
this.update_time = obj[0].value; |
|||
}, |
|||
goBack() { |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
|
|||
.t-router-page { |
|||
|
|||
.t-title { |
|||
font-size: 44rpx; |
|||
color: #1A1A1A; |
|||
font-weight: 900; |
|||
@include centerFlex(space-between); |
|||
margin: 60rpx auto 0rpx 40rpx; |
|||
.t-reset{ |
|||
padding-right: 48rpx; |
|||
@include centerFlex(center); |
|||
font-size: 32rpx; |
|||
color: #009874; |
|||
image{ |
|||
margin-top: 5rpx; |
|||
margin-left: 15rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.t-update{ |
|||
font-size: 28rpx; |
|||
color: #9C9C9F; |
|||
margin-top: 38rpx; |
|||
margin-left: 40rpx; |
|||
} |
|||
.t-map{ |
|||
@include centerFlex(center); |
|||
width:700rpx; |
|||
// background-color: lightgray; |
|||
// height: 450rpx; |
|||
margin: 25rpx; |
|||
} |
|||
.t-box { |
|||
height: 500rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
width: 100%; |
|||
|
|||
.tab-list { |
|||
width: 100%; |
|||
padding-left: 30rpx; |
|||
@include centerFlex(flex-start); |
|||
flex-wrap: nowrap; |
|||
position: relative; |
|||
|
|||
.t-item { |
|||
margin-right: 50rpx; |
|||
padding: 10rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 900; |
|||
color: #9C9C9F; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.active { |
|||
color: #009874; |
|||
@include centerFlex(center); |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.active:after { |
|||
position: absolute; |
|||
content: ""; |
|||
background-color: #009874; |
|||
color: #009874; |
|||
width: auto; |
|||
display: block; |
|||
width: 30rpx; |
|||
text-align: center; |
|||
height: 6rpx; |
|||
border-radius: 3rpx; |
|||
top: 60rpx; |
|||
} |
|||
} |
|||
|
|||
.info-list { |
|||
margin-top: 30rpx; |
|||
margin-bottom: 50rpx; |
|||
width: 700rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 10rpx; |
|||
font-size: 28rpx; |
|||
|
|||
.i-item { |
|||
@include centerFlex(flex-start); |
|||
|
|||
.i-box { |
|||
@include centerFlex(flex-start); |
|||
flex-direction: row; |
|||
padding: 26rpx 20rpx; |
|||
height: 100%; |
|||
} |
|||
|
|||
.i-box:first-child { |
|||
@include centerFlex(center); |
|||
width: 300rpx; |
|||
text-align: center; |
|||
border-right: 1rpx solid #F2F2F7; |
|||
} |
|||
|
|||
.i-box:nth-child(2) { |
|||
width: 100%; |
|||
} |
|||
|
|||
} |
|||
|
|||
.i-item:not(:last-child) { |
|||
border-bottom: 1rpx solid #F2F2F7; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,445 @@ |
|||
<template> |
|||
<view class="t-router-page"> |
|||
<!-- <store-name></store-name> --> |
|||
<view class="t-title">路由器管理 |
|||
<view class="t-reset" @click="clickReboot">重启 |
|||
<image src="../../static/images/refresh.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="t-update"> |
|||
更新时间: {{update_time}} |
|||
</view> |
|||
|
|||
<view class="t-map" v-if="covers.length>0"> |
|||
<map style="width: 100%; height: 250px;" :latitude="latitude" :longitude="longitude" :markers="covers"> |
|||
</map> |
|||
</view> |
|||
<view class="t-box"> |
|||
<view class="info-list"> |
|||
<view class="i-item" v-for="(item,index) in infoObj"> |
|||
<view class="i-box">{{item.name}}</view> |
|||
<rich-text class="i-box" :nodes="item.value"></rich-text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '../../../../utils/util'; |
|||
import store_name from '../../components/store_name/store_name'; |
|||
import deviceServer from '../../js/device_server'; |
|||
import deviceApi from '../../js/device_api'; |
|||
|
|||
const rootPage = '/subpackage/device' |
|||
|
|||
const infoObj = [ |
|||
{ |
|||
key:"update_time", |
|||
value:"", |
|||
name:"在线时间", |
|||
key2:"" |
|||
},{ |
|||
key:"model", |
|||
value:"00-00-00", |
|||
name:"路由型号", |
|||
key2:"" |
|||
},{ |
|||
key:"mac", |
|||
value:"", |
|||
name:"MAC地址", |
|||
key2:"" |
|||
},{ |
|||
key:"firmware", |
|||
value:"", |
|||
name:"固件版本", |
|||
key2:"" |
|||
},{ |
|||
key:"imei", |
|||
value:"", |
|||
name:"imei", |
|||
key2:"" |
|||
},{ |
|||
key:"imsi", |
|||
value:"", |
|||
name:"imsi", |
|||
key2:"" |
|||
},{ |
|||
key:"iccid", |
|||
value:"", |
|||
name:"iccid", |
|||
key2:"" |
|||
},{ |
|||
key:"mncmcc", |
|||
value:"", |
|||
name:"国家代码", |
|||
key2:"" |
|||
},{ |
|||
key:"lac", |
|||
value:"", |
|||
name:"lac", |
|||
key2:"" |
|||
},{ |
|||
key:"cellid", |
|||
value:"", |
|||
name:"cellid", |
|||
key2:"" |
|||
},{ |
|||
key:"csq", |
|||
value:"", |
|||
name:"信号强度", |
|||
key2:"" |
|||
},{ |
|||
key:"lanip", |
|||
value:"", |
|||
name:"路由IP", |
|||
key2:"ipaddr" |
|||
},{ |
|||
key:"lanip", |
|||
value:"", |
|||
name:"掩码", |
|||
key2:"netmask" |
|||
},{ |
|||
key:"lanip", |
|||
value:"", |
|||
name:"网关", |
|||
key2:"gateway" |
|||
},{ |
|||
key:"lanip", |
|||
value:"", |
|||
name:"dns1", |
|||
key2:"" |
|||
},{ |
|||
key:"lanip", |
|||
value:"", |
|||
name:"dns2", |
|||
key2:"" |
|||
} |
|||
]; |
|||
import { |
|||
mapState |
|||
} from 'vuex' |
|||
export default { |
|||
components: { |
|||
'store-name': store_name |
|||
}, |
|||
computed: { |
|||
...mapState({ |
|||
storeList: state => state.device.storeList, |
|||
curStoreInfo: state => state.device.curStoreInfo, |
|||
}), |
|||
isDel() { |
|||
return (item) => { |
|||
return item[2] == "删除" ? "true" : "" |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
infoObj, |
|||
latitude: 23.2174411, |
|||
longitude: 113.3048267, |
|||
update_time:new Date(), |
|||
covers: [ |
|||
], |
|||
} |
|||
}, |
|||
async onLoad(opts) { |
|||
console.log("opts:",opts); |
|||
this.mac = opts.mac; |
|||
this.updateList() |
|||
// try { |
|||
// util.showLoad(); |
|||
// let _brandInfo = await this.$store.dispatch('getBrandInfo'); |
|||
// await this.$store.dispatch('getStoreList'); |
|||
// util.hideLoad(); |
|||
// } catch (err) { |
|||
// util.hideLoad(); |
|||
// } |
|||
|
|||
}, |
|||
onShow() { |
|||
// this.updateList() //更新中控信息 |
|||
console.log("123",infoObj); |
|||
}, |
|||
watch: { |
|||
// curStoreInfo(newVal, oldVal){ |
|||
// this.infoArr.length = 1 |
|||
// this.updateList() |
|||
// } |
|||
}, |
|||
methods: { |
|||
clickReboot(){ |
|||
let that = this |
|||
uni.showModal({ |
|||
content: `确认要重启路由 ?`, |
|||
success(res) { |
|||
console.log("确认", res.confirm) |
|||
if(res.confirm){ |
|||
that.reboot4G() |
|||
} |
|||
}, |
|||
}) |
|||
}, |
|||
reboot4G(){ |
|||
util.showLoad(); |
|||
deviceServer.post({ |
|||
url: deviceApi.reboot4G, |
|||
data: { |
|||
mac:this.mac |
|||
}, |
|||
isDefaultGet: false, |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
if (res.data.code == 0) { |
|||
util.showNone(res.data.message || '操作成功！'); |
|||
} else { |
|||
util.showNone(res.data.message || '操作失败！'); |
|||
} |
|||
}) |
|||
.catch(err => { |
|||
util.hideLoad() |
|||
}) |
|||
}, |
|||
async updateList() { |
|||
let that = this |
|||
if(!this.mac)return |
|||
util.showLoad(); |
|||
deviceServer.post({ |
|||
url: deviceApi.getRouterDetail, |
|||
data: { |
|||
mac:this.mac, |
|||
is_sync:0 |
|||
}, |
|||
isDefaultGet: false, |
|||
}) |
|||
.then(res => { |
|||
util.hideLoad(); |
|||
if (res.data.code == 0) { |
|||
that.filterRouterData(res.data.data) |
|||
} else { |
|||
util.showNone(res.data.message || '操作失败！'); |
|||
} |
|||
}) |
|||
.catch(err => { |
|||
util.hideLoad() |
|||
}) |
|||
|
|||
// this.operateReq({ |
|||
// data: timingData, |
|||
// succFun: (list) => { |
|||
// that.infoArr.length = 1; |
|||
// list.forEach(async (item,i)=> { |
|||
// if(item.day_of_week)item.day_of_week = item.day_of_week.sort((a,b)=>a-b);//后端数据未排序 |
|||
// let timetxt = await that.getTimeTxt(item); |
|||
// that.infoArr.push([item.expand_value.main.title||"-",timetxt||"-","删除",item.time_arrow_id]) |
|||
// }) |
|||
// } |
|||
// }) |
|||
}, |
|||
//过滤路由数据 |
|||
filterRouterData(data){ |
|||
console.log("filterRouterData:",data); |
|||
let obj = this.infoObj |
|||
for(var i in obj){ |
|||
let e = obj[i] |
|||
let res = data[e.key] |
|||
if(!res) continue |
|||
e.value = (typeof(res)=="object")?data[e.key][e.key2]:res; |
|||
} |
|||
if(data.clientiplist.length>0){ |
|||
data.clientiplist.forEach((e,i)=>{ |
|||
console.log(i,e); |
|||
obj.push({ |
|||
value:e[0], |
|||
name:`终端${i+1} IP` |
|||
}) |
|||
obj.push({ |
|||
value:e[1], |
|||
name:`终端${i+1} MAC` |
|||
}) |
|||
}) |
|||
} |
|||
this.update_time = obj[0].value; |
|||
//填充坐标点到地图 |
|||
let location_arr = data.position.location.split(",") |
|||
this.latitude = location_arr[1]; |
|||
this.longitude = location_arr[0]; |
|||
this.covers.push({ |
|||
latitude: location_arr[1], |
|||
longitude: location_arr[0], |
|||
width:40, |
|||
height:40, |
|||
iconPath: '../../static/images/devices/18.png' |
|||
}) |
|||
}, |
|||
|
|||
//该函数由后台管理前端提供逻辑, 与后台前端显示逻辑同步 |
|||
getTimeTxt(row) { |
|||
return new Promise((rs,rj)=>{ |
|||
|
|||
}) |
|||
|
|||
}, |
|||
goBack() { |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}) |
|||
}, |
|||
// 操作接口请求 |
|||
operateReq({ |
|||
data, |
|||
succFun, |
|||
isTip = false, |
|||
isLoad = true, |
|||
|
|||
}) { |
|||
let that = this |
|||
if (isLoad) util.showLoad(); |
|||
deviceServer.post({ |
|||
url: deviceApi.ouxuanac, |
|||
data: data, |
|||
isDefaultGet: false, |
|||
}) |
|||
.then(res => { |
|||
if (isLoad) util.hideLoad(); |
|||
if (res.data.code == 0) { |
|||
if (isTip) util.showNone(res.data.message || '操作成功！'); |
|||
succFun(res.data.data) |
|||
} else { |
|||
if (isTip) util.showNone(res.data.message || '操作失败！'); |
|||
} |
|||
}) |
|||
.catch(err => { |
|||
if (isLoad) util.hideLoad() |
|||
}) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
|
|||
.t-router-page { |
|||
|
|||
.t-title { |
|||
font-size: 44rpx; |
|||
color: #1A1A1A; |
|||
font-weight: 900; |
|||
@include centerFlex(space-between); |
|||
margin: 60rpx auto 0rpx 40rpx; |
|||
.t-reset{ |
|||
padding-right: 48rpx; |
|||
@include centerFlex(center); |
|||
font-size: 32rpx; |
|||
color: #009874; |
|||
image{ |
|||
margin-top: 5rpx; |
|||
margin-left: 15rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.t-update{ |
|||
font-size: 28rpx; |
|||
color: #9C9C9F; |
|||
margin-top: 38rpx; |
|||
margin-left: 40rpx; |
|||
} |
|||
.t-map{ |
|||
@include centerFlex(center); |
|||
width:700rpx; |
|||
// background-color: lightgray; |
|||
// height: 450rpx; |
|||
margin: 25rpx; |
|||
} |
|||
.t-box { |
|||
height: 500rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
width: 100%; |
|||
|
|||
.tab-list { |
|||
width: 100%; |
|||
padding-left: 30rpx; |
|||
@include centerFlex(flex-start); |
|||
flex-wrap: nowrap; |
|||
position: relative; |
|||
|
|||
.t-item { |
|||
margin-right: 50rpx; |
|||
padding: 10rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 900; |
|||
color: #9C9C9F; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.active { |
|||
color: #009874; |
|||
@include centerFlex(center); |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.active:after { |
|||
position: absolute; |
|||
content: ""; |
|||
background-color: #009874; |
|||
color: #009874; |
|||
width: auto; |
|||
display: block; |
|||
width: 30rpx; |
|||
text-align: center; |
|||
height: 6rpx; |
|||
border-radius: 3rpx; |
|||
top: 60rpx; |
|||
} |
|||
} |
|||
|
|||
.info-list { |
|||
margin-top: 30rpx; |
|||
margin-bottom: 50rpx; |
|||
width: 700rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 10rpx; |
|||
font-size: 28rpx; |
|||
|
|||
.i-item { |
|||
@include centerFlex(flex-start); |
|||
|
|||
.i-box { |
|||
@include centerFlex(flex-start); |
|||
flex-direction: row; |
|||
padding: 26rpx 20rpx; |
|||
height: 100%; |
|||
} |
|||
|
|||
.i-box:first-child { |
|||
width: 250rpx; |
|||
text-align: center; |
|||
border-right: 1rpx solid #F2F2F7; |
|||
} |
|||
|
|||
.i-box:nth-child(2) { |
|||
width: 100%; |
|||
} |
|||
|
|||
} |
|||
|
|||
.i-item:not(:last-child) { |
|||
border-bottom: 1rpx solid #F2F2F7; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 80 | Height: 80 | Size: 3.0 KiB |
|
After Width: 80 | Height: 80 | Size: 1.7 KiB |
|
After Width: 80 | Height: 80 | Size: 4.8 KiB |
|
After Width: 80 | Height: 80 | Size: 1.3 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue