111
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

1026 lines
25 KiB

<template>
<view class="pagecontent page-content my-bg" style=" background-color: #fff;">
<cu-custom bgColor="bg-red">
<block slot="content">首页</block>
</cu-custom>
<view class="fixed">
<view class="bg-red pagestart">
<view class="cu-bar search showBtn">
<!-- <view class="text-xxl margin-left text-center bg-red">
<view class="cuIcon-scan"></view>
</view> -->
<view class="margin-left text-center">
<text>{{locationName}}</text>
<text class="cuIcon-triangledown"></text>
</view>
<view class="search-form radius" @tap="InputFocus">
<text class="cuIcon-search"></text>
<input disabled :adjust-position="false" type="text" placeholder="搜索油站名称"
confirm-type="search"></input>
</view>
<!-- <view class="" @tap='gotoMap'>
<image src="../../../static/img/dt.png" mode="widthFix" style="width: 27px;height: 27px;"></image>
</view> -->
</view>
</view>
<!-- 红色背景四个 -->
<view class="bg-red padding pagestarttwo">
<view class="grid col-4 text-center ">
<view class="text-xxl" @tap="openScan">
<view class="cuIcon-scan">
</view>
<text class="text-df">
扫一扫
</text>
</view>
<view class="text-xxl" @tap="showQr">
<view class="cuIcon-qr_code">
</view>
<text class="text-df">
付款码
</text>
</view>
<view class="text-xxl" @tap="toCards">
<view class="cuIcon-vipcard">
</view>
<text class="text-df">
加油卡
</text>
</view>
<view class="text-xxl" @tap="toOrders">
<view class="cuIcon-form">
</view>
<text class="text-df">
订单中心
</text>
</view>
</view>
</view>
</view>
<view class="placeholder-hidden">
<view class="bg-red pagestart">
<view class="cu-bar search">
<view class="text-xxl margin-left text-center bg-red">
<!-- <view class="cuIcon-scan"></view> -->
</view>
</view>
</view>
<!-- 红色背景四个 -->
<view class="bg-red padding pagestarttwo">
<view class="grid col-4 text-center ">
<view class="text-xxl">
<view class="cuIcon-scan">
</view>
<text class="text-df">
扫一扫
</text>
</view>
<view class="text-xxl">
<view class="cuIcon-qr_code">
</view>
<text class="text-df">
付款码
</text>
</view>
<view class="text-xxl">
<view class="cuIcon-vipcard">
</view>
<text class="text-df">
加油卡
</text>
</view>
<view class="text-xxl">
<view class="cuIcon-form">
</view>
<text class="text-df">
订单中心
</text>
</view>
</view>
</view>
</view>
<!-- 宫格菜单开始 -->
<view class="bg-white padding pagestartthree">
<view class="grid col-5 text-center ">
<view class="text-xxl " v-for="(item,index) in cuIconList" @tap="shadoumeiyou(index)" :key="index"
:class="index<5?'margin-bottom':''">
<!-- <view :class="['cuIcon-'+item.icon,'text-' +item.color]">
</view> -->
<view class="text-center">
<view class="my-icon-sm">
<image :src="item.iconUrl?imgURL +item.iconUrl:item.local" mode="widthFix"></image>
</view>
<view class="text-sm">
<text class="text-sm color-333">
{{item.name}}
</text>
</view>
</view>
</view>
</view>
</view>
<!-- 广告图片开始 -->
<view class=" padding" style=" background-color: #f1f1f1;">
<view class="">
<swiper autoplay interval='5000' style="width: 100%;height: 204rpx;" class="swiper" circular>
<swiper-item @click="swiperClick(item,index)" v-for="(item,index) in swiperArray" :key='index'>
<image :src="item.src" style="width: 100%;" mode="widthFix"></image>
</swiper-item>
</swiper>
</view>
</view>
<!-- 筛选开始 -->
<view class="screentop bg-white " @tap="scrollScreen">
<!-- <view class="">
<sl-filter @result="filterRes" reflexTitle ref="slFilter" :menuList="menuList"></sl-filter>
</view> -->
<view class=" ">
<view class="" v-if="siteList.length>0">
<site-item v-for="(item,index) in siteList" :key="item.id" :site-item="item" :first="index==0"
class="cu-list menu-avatar cu-item" @tap="toDetail(item)">
</site-item>
</view>
<view class="" v-else>
<my-empty></my-empty>
</view>
</view>
</view>
<msg-models :showAuthFrror="showAuthFrror" @hideOneModal="hideModel"></msg-models>
<three-sites @hideOneModal="showThreeSites=false" :showThreeSites="showThreeSites"></three-sites>
</view>
</template>
<script>
import msgModels from '../../components/showModels.vue'
import accountApi from '@/api/account.js'
import Financial from '@/api/Financial.js'
import threeSites from '@/components/three-sites.vue'
import oilSiteApi from '@/api/oil-site.js'
import siteItem from '@/components/site-item/site-item.vue'
// import slFilter from '@/components/sl-filter/sl-filter.vue'
export default {
components: {
siteItem,
threeSites,
msgModels
// slFilter
},
data() {
return {
swiperArray: [
// {
// src: 'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/banner-2etc.png',
// // link: 'https://h5.51etr.com/pro/onlineApply/?type=20220831103626200101811'
// },
{
src: 'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/banner-2dwk.png',
link: 'https://tengxun.hkzj168.com/?ChannelId=20220831152210221048473'
},
],
siteInfo: {},
yellowURL: this.global.yellowURL + 'xq-ad/',
siteId: '',
isOther: uni.getStorageSync('isOther'),
showAuthFrzen: uni.getStorageSync('showAuthFrzen') ? uni.getStorageSync('showAuthFrzen') : 0,
showAuthFrror: false,
showThreeSites: false,
filterData: {},
menuList: uni.getStorageSync('filterData') ? uni.getStorageSync('filterData') : [{
title: '渠道',
isMutiple: false,
key: 'channelCode',
detailList: [{
title: "全部",
value: ""
}]
},
{
title: '0#轻柴油',
key: 'oilProductCode',
isMutiple: false,
detailList: [{
title: "全部",
value: ""
}]
},
{
title: '品牌',
key: 'siteBrand',
isSort: true,
isMutiple: false,
detailList: [{
title: "全部",
value: ""
}]
}
],
getCount: 0,
siteList: [],
height: 0,
starUrl: this.global.starUrl,
qqMapKey: this.global.qqMapKey,
imgURL: this.global.imgURL + 'index/',
location: uni.getStorageSync('location'),
InputBottom: 0,
show: false,
locationName: '',
title: 'Hello',
cuIconList: [{
iconUrl: 'icon-1.png',
// icon: 'location',
color: 'red',
badge: 120,
name: '附近油站'
},
{
iconUrl: 'icon-2.png',
color: 'orange',
badge: 0,
name: '线路规划'
},
{
local: 'https://xoil-public.oss-cn-beijing.aliyuncs.com/enterprise_startoil/qzdt.png',
color: 'purple',
badge: 0,
name: '全站地图'
},
{
iconUrl: 'icon-3.png',
color: 'yellow',
badge: 0,
name: '实体油卡'
},
{
iconUrl: 'icon-4.png',
color: 'olive',
badge: 0,
name: '消费分析'
},
{
iconUrl: 'icon-5.png',
color: 'cyan',
badge: 0,
name: '消息中心'
},
{
iconUrl: 'icon-6.png',
color: 'red',
badge: 0,
name: '中交风控'
},
{
iconUrl: 'icon-7.png',
color: 'purple',
badge: 0,
name: 'ETC'
},
// {
// iconUrl: 'icon-8.png',
// // icon: 'taxi',
// color: 'mauve',
// badge: 0,
// name: '违章查询'
// },
{
iconUrl: 'icon-9.png',
color: 'purple',
badge: 0,
name: '我的车辆'
},
{
iconUrl: 'iocn-10.png',
color: 'cyan',
badge: 0,
name: '操作说明'
},
]
};
},
created() {},
onReady() {
let _that = this
let IsOtherUser = _that.isOther
console.log(IsOtherUser, '这里是判断是否为卡力')
console.log('这里是onShow', IsOtherUser, '++++++')
if (IsOtherUser) {
console.log('首页 卡力 进入')
uni.showToast({
title: '卡力用户只支持跳转登录',
icon: 'none'
})
uni.reLaunc({
url: '../../../BagAuth/pages/login/login'
})
return
}
console.log('首页 非卡力 进入')
},
onShow() {
this.refreshLocation()
let _that = this
let IsOtherUser = _that.isOther
console.log(IsOtherUser, '这里是判断是否为卡力')
console.log('这里是onShow', IsOtherUser, '++++++')
if (IsOtherUser) {
console.log('首页 卡力 进入')
uni.showToast({
title: '卡力用户只支持跳转登录',
icon: 'none'
})
uni.reLaunc({
url: '../../../BagAuth/pages/login/login'
})
return
}
console.log('首页 非卡力 进入')
},
onLoad(e) {
console.log(e, '首页')
let _that = this
let IsOtherUser = _that.isOther
console.log(IsOtherUser, '这里是判断是否为卡力')
console.log('这里是onLoad', IsOtherUser, '++++++')
if (IsOtherUser) {
console.log('首页 卡力 进入')
uni.showToast({
title: '卡力用户只支持跳转登录',
icon: 'none'
})
uni.navigateTo({
url: '../../../BagAuth/pages/login/login'
})
return
}
console.log('首页 非卡力 进入测试++')
this.reverseGeocoder(this.location)
},
onPullDownRefresh() {
this.refreshLocation()
this.getSiteList()
setTimeout(function() {
uni.stopPullDownRefresh()
}, 800);
},
onTabItemTap(res) {
this.showThreeSites = false
},
onShow() {
const token = uni.getStorageSync('Authorization')
const openid = uni.getStorageSync('openid')
if (token && openid) {
this.getAuthInfo()
this.refreshLocation()
} else {
uni.showToast({
title: '您还没有登录哦',
icon: "none"
})
}
// uni.navigateTo({
// url: `/BagStation/pages/stationDetail/stieQr?siteId=1372099296709754880&activeChannelCode=XOIL`
// })
// uni.redirectTo({
// url:'/BagStation/pages/makeOrder/makeOrder'
// // url:'/BagStation/pages/makeOrder/payResult?status=success'
// })
// url:'/BagStation/pages/makeOrder/payResult?status=success'
this.getSiteList();
},
mounted() {},
beforeCreate() {},
onReady() {
// this.getSiteList()
},
methods: {
swiperClick(item,index) {
if(!item?.link) return
switch (Number(index)) {
// case 0:
// this.goCall()
// break;
default:
console.log('item.link')
uni.navigateTo({
url: '/pages/tabbar/home/link?url=' + encodeURIComponent(JSON.stringify(item.link))
})
}
},
gotoMap() {
uni.navigateTo({
url: '/BagStation/pages/allMap/allMap'
})
},
goToPage(url) {
if (!url) return;
uni.navigateTo({
url
});
},
getAmount() {
accountApi.getTotalOilCardInfo().then(res => {
if (res.code == 20000) {
this.userTotal = res.data
}
})
},
// refreshLocation() {
// wx.showLoading({
// title: '定位中...',
// mask: true,
// })
// return new Promise((resolve, reject) => {
// let _locationChangeFn = (res) => {
// console.log('location change', res)
// uni.setStorageSync('location', res)
// this.getSiteList();
// wx.hideLoading()
// wx.offLocationChange(_locationChangeFn)
// }
// wx.startLocationUpdate({
// success: (res) => {
// console.log(res);
// wx.onLocationChange(_locationChangeFn)
// resolve()
// },
// fail: (err) => {
// console.log('获取当前位置失败', err)
// wx.hideLoading()
// reject()
// }
// })
// })
// },
refreshLocation() {
uni.getLocation({
type: 'wgs84',
success: function(res) {
uni.setStorageSync('location', res)
},
complete: (res) => {
// console.log('定位',res)
this.getSiteList()
var msgTip = ''
if (res.errMsg == 'getLocation:fail auth deny') {
msgTip = '请允许小程序获取您的位置'
} else if (res.errMsg == 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') {
msgTip = '请您打开手机定位'
}
if (msgTip) {
setTimeout(() => {
uni.showToast({
title: msgTip,
icon: 'none'
})
}, 300)
}
}
});
},
hideModel(name) {
if (name == 'auth') {
this.showAuthFrror = false
if (this.showAuthFrzen <= new Date().getTime()) {
// 一小时后再提示
uni.setStorageSync('showAuthFrzen', new Date().getTime() + 10 * 1000)
// uni.setStorageSync('showAuthFrzen', new Date().getTime() + 1 * 60 * 60 * 1000)
}
}
},
getAuthInfo() {
oilSiteApi.getUserAuthInfo().then(res => {
if (res.code === 20000) {
let _that = this
let IsOtherUser = _that.isOther
console.log(IsOtherUser, '这里是判断是否为卡力')
console.log('这里是getUserAuthInfo', IsOtherUser, '++++++')
if (IsOtherUser) {
uni.showToast({
title: '卡力用户只支持跳转登录',
icon: 'none'
})
uni.reLaunch({
url: '../../../BagAuth/pages/login/login'
})
return
}
this.getAmount()
this.getSiteList()
// realStatus: 0 vehicleStatus: 0
if (this.showAuthFrzen <= new Date().getTime()) {
this.showAuthFrror = res.data.realStatus && res.data.vehicleStatus ? false :
true
}
}
})
},
goCall() {
uni.makePhoneCall({
phoneNumber: '4008-56-5355'
})
},
reverseGeocoder(location) {
this.selLocation = location
this.$qqmapsdk.reverseGeocoder({
location: location,
success: (res) => {
// console.log(res)
this.locationName = res.result.address_component.city
},
fail: (res) => {
// console.log(res)
}
})
},
shadoumeiyou(index) {
// if(!uni.getStorageSync('user')){
// uni.showToast({
// title:'请先登登录',
// icon:'none'
// })
// }
if (index == 0) {
uni.switchTab({
url: '/pages/tabbar/station/stationList'
})
} else if (index == 1) {
// const referer = '星油云'; //调用插件的app的名称
// const endPoint = JSON.stringify({
// name: '输入目的地',
// latitude: 39.89631551,
// longitude: 116.323459711
// });
// wx.navigateTo({
// url: 'plugin://routePlan/index?key=' + this.qqMapKey + '&referer=' + referer +
// '&endPoint=' + endPoint
// })
if (!uni.getStorageSync('user')) {
uni.showModal({
title: '请您登录',
content: "登录星油加油才可以加油 |˛˙꒳˙)♡",
confirmText: '去登陆',
success: (res) => {
if (res.confirm) {
uni.reLaunch({
url: '../../../BagAuth/pages/login/login'
})
}
}
})
return
}
uni.removeStorageSync("origins")
uni.removeStorageSync("destination")
wx.navigateTo({
// url:'../../../BagStation/pages/routePlain/routePlain',
url: '../../../BagStation/pages/newRoutePlanning/newRoutePlanning'
// url:'../../../BagStation/pages/overviewMap/overviewMap',
})
} else if (index == 9) {
this.goToPage('/BagAuth/pages/agreeMent/OperationGuide')
}
// else if(index==8){
// uni.navigateTo({
// url: '/BagStation/myCars/myCars'
// })
// }
else if (index == 2) {
if (!uni.getStorageSync('user')) {
uni.showModal({
title: '请您登录',
content: "登录星油加油才可以加油 |˛˙꒳˙)♡",
confirmText: '去登陆',
success: (res) => {
if (res.confirm) {
uni.reLaunch({
url: '../../../BagAuth/pages/login/login'
})
}
}
})
return
}
wx.navigateTo({
// url:'../../../BagStation/pages/routePlain/routePlain',
// url:'../../../BagStation/pages/newRoutePlanning/newRoutePlanning'
url: '../../../BagStation/pages/overviewMap/overviewMap',
})
} else if(index == 6){
const user = uni.getStorageSync('user');
if(user){
Financial.findHomePageReport({customerId:user.id}).then(res=>{
if(res.data){
uni.navigateTo({
url:`../../../Financial/pages/estimate/index?data=${encodeURIComponent(JSON.stringify(res.data))}`
})
}else{
uni.navigateTo({
url:'../../../Financial/pages/index?guide=1'
})
}
});
}else{
uni.showToast({
title: '请先登录!',
icon: 'none'
})
}
} else if (index == 7) {
this.swiperClick(this.swiperArray[0],1)
} else {
uni.showToast({
title: '功能暂无',
icon: 'none'
})
}
},
showQr() {
// uni.navigateTo({
// url: '/BagStation/pages/stationDetail/stieQr'
// })
if (!uni.getStorageSync('user')) {
uni.showModal({
title: '请您登录',
content: "登录星油加油才可以加油 |˛˙꒳˙)♡",
confirmText: '去登陆',
success: (res) => {
if (res.confirm) {
uni.reLaunch({
url: '../../../BagAuth/pages/login/login'
})
}
}
})
return
}
this.showThreeSites = true
},
toCards() {
uni.navigateTo({
url: '/BagMoney/pages/oilCards/oilCards'
})
},
toOrders() {
uni.switchTab({
url: '/pages/tabbar/order/orderList/orderList'
})
},
filterRes(val) {
this.filterData = val
this.getSiteList()
},
getSiteList() {
let data1 = {
currentPage: 1,
pageSize: 10,
params: { //类型:Object 必有字段 备注:// 筛选对象
sort: "juli", //类型:String 必有字段 备注:// 智能排序 ( price:价格最低 juli:距离最近 ) 默认距离排序
longitude: 116.397451, // 必有字段 备注:// 当前位置经度
latitude: 39.909187, // 必有字段 备注:// 当前位置维度
...uni.getStorageSync('location'),
...this.filterData,
// siteBrand: "", // 备注:// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
// channelCode: "", // 备注:// 渠道编码 ( OIL:星油 WJY:万金油 LV:老吕(找油网) TY:团油 YDJY:一点加油(壳牌))
oilProductCode: "0#" // 备注:// 油号选择 ( 0# 92# 92#)
}
}
if (!uni.getStorageSync('user')) {
data1.params.role = 1
oilSiteApi.readOnlySites(data1).then(res => {
let _that = this
let IsOtherUser = _that.isOther
console.log(IsOtherUser, '这里是判断是否为卡力')
console.log('这里是readOnlySites', IsOtherUser, '++++++')
if (IsOtherUser) {
uni.showToast({
title: '卡力用户只支持跳转登录',
icon: 'none'
})
uni.reLaunc({
url: '../../../BagAuth/pages/login/login'
})
return
}
this.getCount++
if (res.code == 20000) {
// console.log(res.data.list)
this.siteList = res.data.list
} else {
if (this.getCount == 1) {
setTimeout(() => {
this.getSiteList()
}, 1000)
} else {
uni.getSetting({
success: (resSet) => {
if (resSet.authSetting['scope.address'] == false) {
uni.showMode({
title: '请您打开定位权限',
content: '用于获取您当前位置附近的油站',
confirmText: '去设置',
success: (res) => {
if (res.confirm) {
uni.openSetting({
})
}
}
})
}
}
})
}
}
})
} else {
oilSiteApi.getSiteList(data1).then(res => {
if (res.code == 20000) {
// console.log(res.data.list)
this.siteList = res.data.list
}
})
}
},
toDetail(item) {
console.log(item)
let itemS = JSON.stringify(item)
console.log('进入油站详情items', itemS)
if (uni.getStorageSync('user')) {
if (item.channelCode === 'TY') {
uni.setStorageSync('OtherSiteInfo', item)
uni.navigateTo({
url: `/BagStation/pages/stationDetail/stationDetail?channerCode=${item.channelCode}`,
fail: (err) => {
// console.log(err)
},
success: () => {
// console.log('err')
}
})
return
}
uni.navigateTo({
url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}`,
fail: (err) => {
// console.log(err)
},
success: () => {
// console.log('err')
}
})
} else {
uni.showModal({
title: '请您登录',
content: "登录星油加油才可以加油 |˛˙꒳˙)♡",
confirmText: '去登陆',
success: (res) => {
if (res.confirm) {
uni.reLaunch({
url: '../../../BagAuth/pages/login/login'
})
}
}
})
}
},
getFilterData() {
oilSiteApi.getCheckInfo().then(res => {
if (res.code == 20000) {
let channelCodes = []
res.data.channelCodes.map(item => {
channelCodes.push({
title: item.name,
value: item.id
})
})
let productCodes = []
res.data.productCodes.map(item => {
productCodes.push({
title: item.name,
value: item.id
})
})
let siteBrands = []
res.data.siteBrands.map(item => {
siteBrands.push({
title: item.name,
value: item.id
})
})
// console.log(channelCodes, productCodes, siteBrands)
this.menuList[0].detailList.concat(channelCodes)
this.menuList[1].detailList.concat(productCodes)
this.menuList[2].detailList.concat(siteBrands)
uni.setStorageSync('filterData', this.menuList)
// this.$refs.slFilter.resetMenuList(this.menuList)
}
})
},
onSelected(res) {
// console.log(res)
},
dateChange(d) {
uni.showToast({
icon: 'none',
title: d
})
},
InputFocus(e) {
uni.switchTab({
url: '/pages/tabbar/station/stationList'
})
},
InputBlur(e) {
this.InputBottom = 0
},
nameSelect(value, item) {
this.title2 = item.text
// console.log(item)
},
typeSelect(value, item) {
// console.log(item)
this.title1 = item.text
},
optionSelect(value, item) {
// console.log(item)
this.title3 = item.text
},
// 扫码逻辑开始
getSiteInfo(id) {
let data2 = {
...uni.getStorageSync('location'),
siteId: id
}
oilSiteApi.getSiteDetails(data2).then(res => {
if (res.code == 20000) {
this.siteInfo = res.data
if (res.data.oilSiteChannelDetailsVos.length == 1 && res.data.oilSiteChannelDetailsVos[0]
.activePay) {
uni.setStorageSync('tempScanSite', this.siteInfo)
this.makePay()
} else {
this.toDetail(this.siteId)
}
}
})
},
makePay() {
uni.navigateTo({
url: `/BagStation/pages/makeOrder/makeOrder?siteId=${this.siteId}`
})
},
getScanRes(code) {
let data2 = {
qrCode: code
}
oilSiteApi.getScanRes(data2).then(res => {
if (res.code == 20000) {
this.siteId = res.data.siteId
this.getSiteInfo(this.siteId)
}
})
},
scan1() {
// 测试用
this.getScanRes('fixed_1371293944539422720')
},
openScan() {
uni.scanCode({
scanType: 'qrCode',
onlyFromCamera: true,
success: (res) => {
console.log(res.result)
this.getScanRes(res.result)
},
fail: (err) => {
uni.showToast({
title: err
})
}
})
},
//结束
scrollScreen() {
// console.log('吸顶判断')
uni.createSelectorQuery().selectViewport().scrollOffset(res => {
let view = uni.createSelectorQuery().in(this).select(".screentop");
let cuBar = uni.createSelectorQuery().in(this).select(".cu-bar");
view.boundingClientRect(data => {
cuBar.boundingClientRect(dataCu => {
if (data.top > dataCu.top) {
uni.pageScrollTo({
scrollTop: data.top - dataCu.top,
duration: 0,
});
}
}).exec();
}).exec();
}).exec();
}
}
};
</script>
<style scoped>
.showBtn {
padding-right: 3%;
}
.bottom-bar {
position: relative;
padding-top: 50px;
margin-bottom: 0;
margin-top: 0;
}
.main-topbar>>>.cu-bar {
height: 380rpx !important;
z-index: 0 !important;
}
.main-topbar>>>.cu-bar .content {
padding-bottom: 300rpx;
}
.bottom-bar-fixed {
position: fixed;
bottom: 0;
padding-top: 70rpx;
width: 100%;
}
.main-money {
position: relative;
z-index: 1;
}
.van-tag {
display: inline-block;
padding: 0.3rem 0.4rem;
position: absolute;
right: 1px;
font-size: 12px;
top: 25%;
background-color: #b9ffca;
border-radius: 10rem 0 0 10rem;
border-color: transparent;
}
.screentop {
min-height: 50vh;
}
.cu-list.menu-avatar>.cu-item {
height: 175rpx;
}
.fixed {
width: 750upx;
position: fixed;
z-index: 2;
}
.pagestart {}
.placeholder-hidden {
opacity: 0;
}
.my-icon-sm {
display: inline-block;
width: 70upx;
text-align: center;
max-height: 70upx;
overflow: hidden;
}
.my-icon-sm .text-sm {
line-height: 1rem;
}
</style>