oil-station/gasStation-uni/pages/index/index.vue
2024-09-22 10:37:38 +08:00

1218 lines
27 KiB
Vue

<template>
<view class="content">
<view class="container">
<!-- 顶部 -->
<swiper class="swiper" style="width: 100%;height: 160px; border-radius: 6px;overflow: hidden; " circular
:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item v-for="(item,index) in list1" :key="index" @click="goPage(item.routeUrl)">
<view class="swiper-item uni-bg-red">
<image :src="item.bannerUrl" style="height: 163px; width: 100%;"></image>
</view>
</swiper-item>
</swiper>
<!-- 顶部结束 -->
<view class="_jgbox">
<view class="_bgox">
<image src="../../static/new/n1.png" mode="" @click="getCode()"></image>
<view class="">扫码买单</view>
</view>
<view class="_bgox" @click="goMemberRecharge()">
<image src="../../static/new/n3.png" mode=""></image>
<view class="">会员充值</view>
</view>
<view class="_bgox" @click="goredemption()">
<image src="../../static/new/n4.png" mode=""></image>
<view class="">积分兑换</view>
</view>
<view class="_bgox" @click="goCoupon()">
<image src="../../static/new/n5.png" mode=""></image>
<view class="">领券中心</view>
</view>
<view class="_bgox">
<image src="../../static/new/n6.png" mode=""></image>
<view class="">邀请有礼</view>
</view>
<view class="_bgox">
<image src="../../static/new/n7.png" mode=""></image>
<view class="">每日抽奖</view>
</view>
<view class="_bgox">
<image src="../../static/new/n8.png" mode=""></image>
<view class="">签到有礼</view>
</view>
<view class="_bgox" @click="goMyCard()">
<image src="../../static/new/hykb.png" mode=""></image>
<view class="">会员卡包</view>
</view>
</view>
<!-- 今日油价 -->
<view class="_yjbox">
<view class="title-img">
<image src="../../static/new/t1.png" mode=""></image>
</view>
<view style="height: 160px;overflow: auto;">
<view class="_gbox" v-for="(item,index) in oilTypeList" :key="index">
<view class="_ns">{{item.oilName}}{{item.oilType}}</view>
<view class="_ns">¥{{item.oilPrice}}</view>
<view class="_ns _lv" v-if="upOrDown==1">{{item.amplitudeOfChange}}↑</view>
<view class="_ns _red" v-else>{{item.amplitudeOfChange}}↓</view>
</view>
<!-- <view class="_gbox">
<view class="_ns">92#汽油</view>
<view class="_ns">¥8.99</view>
<view class="_ns _red">0.12%↓</view>
</view> -->
</view>
</view>
<view class="station-box">
<view class="station-title" style="display: flex;justify-content: space-between;">
<view>{{store.name}}{{store.description ? "("+store.description+")" : ""}}</view>
<view class="lananniu" @click="goGoGo" v-if="distance!=''">
<uni-icons type="paperplane-filled" color="#E02020" size="16"></uni-icons>
导航
</view>
</view><!--顺通石化加油站(工业南路站)-->
<view style="display: flex; flex-wrap: wrap; ">
<view class="bule-icon" v-if="welfare.length!=0" v-for="(item,index) in welfare" :key="index">
{{item}}
</view>
</view>
<view class="dis-bt">
<view class="">
<view class="hui1">{{ store.address }} | {{ distance || 0 }}km </view>
<view class="hui2" v-if="distance"></view>
</view>
<!-- <view class="lananniu" @click="goGoGo" v-if="distance!=''">
<uni-icons type="paperplane-filled" color="#195ADA" size="16"></uni-icons>
{{ distance || "0" }}KM
</view> -->
</view>
</view>
<!-- 加油站卡片结束-->
<view style="width: 100%; height: 68px; "></view>
<u-picker :columns="columns" @confirm="confirm" :show="show" @cancel="show = false"
keyName="label"></u-picker>
<u-popup :show="ruleShow" :closeable="true" :round="10" mode="bottom" @close="close">
<view class="_tbox">
<view class="_btop">百业兴加油站申请</view>
<view class="_bbox">
<view class="b_title">获取您的位置信息</view>
<view class="">我们将获取您的当前位置信息,以便精准推荐离您最近
的店铺信息</view>
</view>
<view class="b-cen">
<view class="_d_anniu" @click="ruleShow = false">拒绝</view>
<view class="_s_anniu" @click="ruleShow = false">允许</view>
</view>
</view>
</u-popup>
<u-popup :show="empowerShow" :closeable="true" :round="10" mode="bottom" @close="empowerclose">
<view class="_tbox">
<view class="_btop">第三方用户信息授权说明</view>
<view class="_bbox">
<view class="">您授权后,小程序开发者将收集您的位置信息,为您提 供智能推荐服务。开发者严格按照《钜油惠百业兴小程 序隐私保护指引》处理您的个人信息,如您发现开发者
不当处理您的个人信息,可进行投诉。</view>
</view>
<view class="b-cen">
<view class="_d_anniu" @click="empowerShow = false">拒绝</view>
<view class="_s_anniu" @click="empowerShow = false">允许</view>
</view>
</view>
</u-popup>
<!--外层结束 -->
<tabbar :msg="msg"></tabbar>
</view>
</view>
</template>
<script>
import tabbar from "../../components/tabbar/tabbar.vue"
import config from '@/config'
import request from '../../utils/request'
import {
callWithErrorHandling
} from "vue"
export default {
data() {
return {
ruleShow: false,
empowerShow: false,
isOpen: false,
chainStoreId: '',
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 500,
joinmsg: '',
msg: "1",
show: false,
shows: '',
title: '',
oilTypeList: '',
columns: [],
oilInfo: {
oilName: '未添加',
oilPrice: '0',
gbPrice: '0'
},
AppToken: uni.getStorageSync("App-Token"),
list1: [],
list3: [
'http://47.95.206.185:83/topbj.png',
],
// 当前经度信息
longitude: "",
// 当前纬度信息
latitude: "",
// 店铺经度信息
lon: "",
// 店铺纬度信息
lat: "",
// 店铺信息
store: {
name: "测试油站",
description: "济南分店",
address: "济南槐荫区"
},
// 店铺福利信息
welfare: [],
distance: "",
storeId: "",
staffId: "",
baseUrl: this.$baseUrl,
}
},
async onLoad(query) {
if (query.storeId) {
// uni.setStorageSync("y_storeId", query.storeId)
uni.setStorageSync("storeId", query.storeId)
}
if (query.type) {
uni.setStorageSync("y_type", query.type)
}
if (query.userId) {
uni.setStorageSync("y_userId", query.userId)
}
if (uni.getStorageSync("appltType") == "WECHAT") {
const q = decodeURIComponent(query.q) // 获取到二维码原始链接内容
if (query.q) {
let str = q.split("?")[1];
let storeId = "";
let staffId = "";
let userId = "";
let type = "";
if (str.includes("&")) {
let arr = str.split("&");
arr.forEach(item => {
if (item.includes("storeId")) {
storeId = item.split("=")[1]
} else if (item.includes("staffId")) {
staffId = item.split("=")[1]
} else if (item.includes("userId")) {
userId = item.split("=")[1]
} else if (item.includes("type")) {
type = item.split("=")[1]
}
})
} else {
storeId = str.split("=")[1]
}
uni.setStorageSync("storeId", storeId)
uni.setStorageSync("y_type", type)
uni.setStorageSync("y_userId", userId)
uni.setStorageSync("inviteStaffId", staffId)
this.storeId = uni.getStorageSync("storeId")
this.chainStoreId = uni.getStorageSync("chainStoreId")
this.staffId = uni.getStorageSync("inviteStaffId")
// await this.getUserAuthority();
// await this.getOilType();
} else {
if (uni.getStorageSync("storeId")) {
this.storeId = uni.getStorageSync("storeId")
}
// await this.getOilType();
}
await this.getUserAuthority();
await this.getTheJudgmentIsTheSame();
} else {
await this.getUserAuthority();
// await this.getOilType();
await this.getTheJudgmentIsTheSame();
}
},
async onShow() {
await this.getTheJudgmentIsTheSame();
await this.isJoined()
this.isRecharge()
// this.getAddress()
// this.getUserAuthority()
this.getIndexBanner()
},
components: {
tabbar
},
methods: {
goMyCard() {
uni.navigateTo({
url: '/pagesHome/MyCard/MyCard'
})
},
getCode() {
uni.scanCode({
onlyFromCamera: true,
success: (res) => {
console.log('扫描二维码成功,结果:' + JSON.stringify(res) + res.result);
let storeId = ""
let staffId = ""
let str = res.result.split("?")[1];
if (str.includes("&")) {
let arr = str.split("&");
arr.forEach(item => {
if (item.includes("storeId")) {
storeId = item.split("=")[1]
} else if (item.includes("staffId")) {
staffId = item.split("=")[1]
}
})
} else {
storeId = str.split("=")[1]
}
console.log(storeId, staffId, 289);
uni.setStorageSync("storeId", storeId)
this.getUserAuthority();
uni.navigateTo({
url: '/pages/refuel/refuel?storeId=' + storeId + '?staffId=' + staffId
})
},
error: (res) => {
console.log('扫描二维码出现错误')
}
})
},
goCoupon() {
uni.navigateTo({
url: '/pagesHome/certificate/index'
})
},
close() {
this.ruleShow = false
},
empowerclose() {
this.empowerShow = false
},
goMemberRecharge() {
uni.navigateTo({
url: '/pagesHome/memberRecharge/index'
})
},
goredemption() {
uni.navigateTo({
url: '/pagesHome/PointsRedemption/index'
})
},
isRecharge() {
request({
url: 'business/storeInformation/store/isRecharge',
method: 'get',
}).then(res => {
if (res.data) {
this.isOpen = true
} else {
this.isOpen = false
}
})
},
// 返回图片路径
getBannerUrl(url) {
let imgurl = ""
if (url.includes("http")) {
imgurl = url
} else {
imgurl = this.baseUrl + url
}
return imgurl;
},
// 跳转banner图对应的页面
goPage(url) {
uni.navigateTo({
url: url,
})
},
// 获取首页轮播图信息
getIndexBanner() {
let _this = this
if (uni.getStorageSync("storeId")) {
request({
url: 'business/indexBanner/list/' + uni.getStorageSync("storeId"),
method: 'get',
}).then(res => {
_this.list1 = res.data
if (res.data.length > 0) {
for (let i = 0; i < res.data.length; i++) {
if (res.data[i].bannerUrl.includes("http")) {
_this.list1[i].bannerUrl = res.data[i].bannerUrl
} else {
_this.list1[i].bannerUrl = _this.baseUrl + res.data[i].bannerUrl
}
}
}
})
}
},
//判断是否是新人
isJoined() {
let params = {
storeId: uni.getStorageSync("storeId")
}
// 判断是否登录
if (!this.AppToken) {
return;
}
request({
url: 'business/marketingActivity/activeNewlywedsRecords/applet',
method: 'get',
params: params
}).then(res => {
console.log("366" + res)
if (res.code == 200 && res.data == 1) {
this.shows = true
} else {
this.shows = false
}
})
},
//立即领取
drawDown() {
/* this.shows = false */
request({
url: 'business/marketingActivity/activeNewlywedsRecords',
method: 'post',
data: {
storeId: this.storeId,
chainStoreId: this.chainStoreId,
}
}).then(res => {
console.log("385" + res)
if (res.code == 200 && res.data == true) {
this.shows = false
uni.showToast({
title: '领取成功!'
})
} else {
this.shows = false
uni.showToast({
title: '领取失败!'
})
}
/* if (res.code == 200 && res.data == 1) {
this.shows = true
} else {
this.shows = false
} */
})
},
//查询新人有礼礼品
selectActiveNewlyweds() {
// 判断是否登录
if (!this.AppToken) {
return;
}
request({
url: 'business/marketingActivity/activeNewlyweds/applet',
method: 'get',
}).then(res => {
console.log("415" + res)
})
},
isExistStoreId() {
if (uni.getStorageSync("storeId")) {
this.getStore(uni.getStorageSync("storeId"));
} else {
this.getAddress(uni.getStorageSync("storeId"));
}
},
// 获取定位信息
getUserAuthority() {
let _this = this;
// this.getAddress();
uni.getSetting({
success(res) {
if (res.authSetting['scope.userLocation'] == false) {
// uni.clearStorageSync();
// _this.getStorageSize()
_this.showRefuseLocationPermission()
} else {
// 用户同意获取位置信息
_this.getAddress(uni.getStorageSync("storeId"));
}
},
fail(err) {
console.log('jujuel,442', err);
},
complete(ress) {
},
withSubscriptions(resx) {
console.log('448', resx);
}
})
},
// 用户拒绝授权的展示
showRefuseLocationPermission() {
const that = this;
wx.showModal({
title: "提示",
content: "需要获取用户位置权限",
confirmText: "前往设置",
showCancel: false,
success(res) {
if (res.confirm) {
uni.openSetting({
success(res) {
console.log("打开设置成功", res);
if (res.authSetting['scope.userLocation']) {
console.log('成功授权userLocation')
that.getAddress()
} else {
console.log('用户未授权userLocation')
// 递归调用本函数,(函数套函数)
that.showRefuseLocationPermission()
}
},
fail(err) {
console.log("打开设置失败", err)
}
})
}
}
})
},
getStorageSize() {
let that = this;
uni.getStorageInfo({
success(res) {
let size = res.currentSize;
if (size < 1024) {
that.storageSize = size + ' B';
} else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
that.storageSize = Math.floor(size / 1024 * 100) / 100 + ' KB';
} else if (size / 1024 / 1024 >= 1) {
that.storageSize = Math.floor(size / 1024 / 1024 * 100) / 100 + ' M';
}
}
})
},
// 判断token是否与当前连锁店id相同
async getTheJudgmentIsTheSame() {
console.log(this.AppToken, 501);
// 判断是否登录
if (!this.AppToken) {
return;
}
await request({
url: 'chainStoreInfo/theJudgmentIsTheSame',
method: 'get',
data: {
"chainStoreId": uni.getStorageSync("chainStoreId")
}
}).then(res => {
if (!res.data) {
uni.removeStorageSync("App-Token");
}
})
// 判断当前登录的code是否相同
if (uni.getStorageSync("appltType") == "WECHAT") {
wx.login({
success(res) {
if (res.code) {
//发起网络请求
request({
url: 'clientApi/sign/mpWxLogin2',
method: "POST",
data: {
code: res.code
}
}).then(resp => {
if (!resp.data) {
uni.removeStorageSync("App-Token");
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
}
if (uni.getStorageSync("appltType") == "ALIPAY") {
my.getAuthCode({
scopes: 'auth_base',
success: res => {
const authCode = res.authCode;
request({
url: "clientApi/sign/alipayLogin/getUserid2",
method: 'post',
data: {
authCode: authCode,
storeId: uni.getStorageSync("storeId"),
},
}).then((resp) => {
if (!resp.data) {
uni.removeStorageSync("App-Token");
}
})
},
fail: err => {
console.log('my.getAuthCode 调用失败', err)
}
});
}
},
// 获取门店信息
getStore(id) {
let _this = this;
request({
url: "business/storeInformation/store/queryStoreById",
method: 'post',
data: {
"storeId": id
},
}).then((response) => {
_this.store = response.data
let welfare = response.data.welfare
uni.setStorageSync("storeId", response.data.id)
uni.setStorageSync("chainStoreId", response.data.chainStoreId)
if (welfare) {
if (welfare.includes(",")) {
_this.welfare = response.data.welfare.split(",")
} else {
_this.welfare.push(response.data.welfare)
}
}
if (response.data.doorstepPhoto) {
let list = JSON.parse(response.data.doorstepPhoto)
_this.list3 = [];
list.forEach(item => {
_this.list3.push(_this.baseUrl + item)
})
}
}).catch((res) => {
})
},
// 获取当前位置
getAddress(storeId) {
let _this = this;
uni.getLocation({
// 谷歌使用wgs84 其他使用gcj02
type: 'gcj02', // 使用国测局坐标系
success: function(res) {
if (_this.longitude == "" && _this.latitude == "") {
_this.longitude = res.longitude;
_this.latitude = res.latitude
}
console.log('经度: ' + _this.longitude);
console.log('纬度: ' + _this.latitude);
request({
url: 'business/storeInformation/store/recentlyStore',
method: 'post',
data: {
"lon": _this.longitude,
"lat": _this.latitude,
"storeId": storeId,
"isLogin": _this.AppToken ? "0" : "1", // 0为登录
},
}).then((response) => {
// uni.showToast({
// title:"121984:"+storeId
// })
if (response.data.store) {
_this.distance = (Math.ceil(response.data.distance))
.toFixed(1)
_this.store = response.data.store
uni.setStorageSync("storeId", response.data.store.id)
uni.setStorageSync("chainStoreId", response.data.store.chainStoreId)
if (response.data.store.welfare) {
if (response.data.store.welfare.includes(",")) {
_this.welfare = response.data.store.welfare
.split(",")
} else {
_this.welfare.push(response.data.store.welfare)
}
}
if (response.data.store.doorstepPhoto) {
let list = JSON.parse(response.data.store.doorstepPhoto)
_this.list3 = [];
list.forEach(item => {
_this.list3.push(_this.baseUrl + item)
})
}
_this.lon = _this.store.longitude,
_this.lat = _this.store.latitude,
_this.getIndexBanner()
_this.getOilType();
} else {
uni.showToast({
title: "当前店铺已关闭!!!",
icon: "none"
})
}
}).catch(err => {})
// uni.showToast({
// title: "获取位置信息成功",
// icon: "none"
// })
},
fail: function(err) {
_this.getStore(2);
// uni.showToast({
// title: "获取位置信息失败"
// })
console.log('获取位置信息失败: ' + err.errMsg);
}
});
},
//获取油站的油号信息
getOilType() {
let params = {
storeId: uni.getStorageSync("storeId")
}
request({
url: 'business/petrolStationManagement/oilNumber/getList2',
method: 'get',
params: params
}).then((res) => {
if (res.code == 200) {
this.oilTypeList = res.data.records
if (this.oilTypeList.length > 0) {
this.oilInfo.oilName = this.oilTypeList[0].oilName,
this.oilInfo.oilPrice = this.oilTypeList[0].oilPrice,
this.oilInfo.gbPrice = this.oilTypeList[0].gbPrice
}
let oilData = []
this.oilTypeList.forEach(res => {
let data = {
id: res.numberId,
label: res.oilName,
oilPrice: res.oilPrice,
gbPrice: res.gbPrice
}
oilData.push(data)
})
this.columns = [oilData]
console.log(this.oilTypeList, '710');
}
})
},
confirm(e) {
console.log('选中的油号', e);
this.oilInfo.oilName = e.value[0].label
this.oilInfo.oilPrice = e.value[0].oilPrice
this.oilInfo.gbPrice = e.value[0].gbPrice
this.show = false
},
cancel() {
this.show = false
},
/* onOverlay() {
this.drawDown();
this.shows = false
uni.showToast({
title: '领取成功'
})
}, */
goActivity() {
// 去活动页
uni.navigateTo({
url: '/pagesHome/Activity/index'
})
},
goCard() {
uni.navigateTo({
url: '/pagesHome/MyCard/MyCard'
})
},
goOil() {
uni.navigateTo({
url: '/pages/refuel/refuel'
})
},
goChooseAddress() {
uni.chooseLocation({
success: ({
name,
address,
latitude,
longitude
}) => { // 选择位置完成后的处理
// this.addressName = address;
console.log(name, address, latitude, longitude);
this.longitude = longitude;
this.latitude = latitude;
this.getAddress()
},
});
},
goMall() {
uni.navigateTo({
url: '/pagesHome/PointsMall/PointsMall'
})
},
toQRcode() {
uni.navigateTo({
url: '/pagesHome/QRcode/QRcode'
})
},
goGoGo() {
let lat = Number(this.lat)
let lon = Number(this.lon)
uni.openLocation({
latitude: lat,
longitude: lon,
name: this.store.name,
address: this.store.address,
success: function() {
console.log('success');
},
complete: function(res) {
console.log(res);
}
});
},
}
}
</script>
<style scoped lang="scss">
.content {
background: #f9f9f9;
box-sizing: border-box;
}
.container {
width: 100%;
box-sizing: border-box;
padding: 10px;
// height: 100vh;
}
.conttainer-top {
width: 100%;
background-size: 100% 100%;
position: relative;
margin-bottom: 60px;
}
.top-title {
font-size: 26px;
color: white;
font-weight: bold;
color: #FFFFFF;
line-height: 25px;
text-shadow: 0px 2px 0px #2F64CD;
position: absolute;
top: 120px;
left: 20px;
}
.lan-gang {
width: 200px;
height: 22px;
background: #2F43F7;
border-radius: 11px;
align-items: center;
display: flex;
justify-content: space-around;
position: absolute;
top: 155px;
left: 20px;
color: white;
}
.lsiez {
font-size: 10px;
display: flex;
}
.conttainer-jg {
width: 95%;
border-radius: 6px;
background: white;
box-sizing: border-box;
padding: 10px;
height: 90px;
margin: 0px auto;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
bottom: -90px;
display: flex;
}
.conttainer-cetr {
width: 95%;
border-radius: 6px;
background: white;
box-sizing: border-box;
padding: 10px;
margin: 10px auto;
}
.jg-box {
width: 25%;
text-align: center;
}
.jg-img {
width: 38px;
height: 38px;
image {
width: 38px;
height: 38px;
}
margin: 5px auto;
}
.jg-size {
font-size: 14px;
}
.conttainer-title {
font-size: 16px;
font-weight: bold;
}
.conttainer-box {
width: 100%;
box-sizing: border-box;
padding: 15px;
background: #F3F6F9;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 8px;
margin-top: 10px;
}
.c-box-box1 {
width: 33%;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.c-box-box2 {
width: 33%;
height: 44px;
text-align: center;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
}
.c-box-box3 {
width: 33%;
height: 44px;
text-align: center;
}
.xblck {
font-size: 14px;
color: #333333;
}
.dblck {
font-size: 20px;
color: #333333;
font-weight: bold;
}
.xred {
font-size: 14px;
color: #ED2828;
}
.dred {
font-size: 20px;
color: #ED2828;
font-weight: bold;
}
.station {
width: 100%;
height: 120px;
background: url('http://47.95.206.185:83/centerbj.png')center no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
padding-top: 30px;
}
.station-box {
width: 100%;
background-color: white;
border-radius: 8px;
box-sizing: border-box;
padding: 15px;
margin: 15px auto;
}
.station-title {
font-size: 16px;
font-weight: bold;
}
.bule-icon {
width: 85px;
font-size: 12px;
color: #333333;
box-sizing: border-box;
padding: 2px 2px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #FA6400;
border-radius: 4px;
margin: 5px 3px;
}
.dis-bt {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.hui1 {
color: #666666;
font-size: 12px;
margin: 5px auto;
}
.hui2 {
color: #999999;
font-size: 12px;
margin: 5px auto;
}
.lananniu {
box-sizing: border-box;
padding: 3px 10px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #E02020;
}
.tabs {
width: 100%;
display: flex;
height: 44px;
}
.scrollbox {
display: flex;
}
.scrollbox-imgs {
width: 195px;
height: 100px;
border-radius: 4px;
background-color: #195ADA;
margin: 0px 10px;
}
.juanniu {
height: 36px;
background: linear-gradient(90deg, #FF7302 0%, #FF5210 100%);
border-radius: 42px;
justify-content: center;
display: flex;
align-items: center;
color: white;
margin-top: 20px;
}
.anniuprp {
width: 130px;
height: 36px;
background: linear-gradient(180deg, #FF6D3A 0%, #FF327A 100%);
box-shadow: inset 0px 0px 6px 3px rgba(255, 255, 255, 0.25);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
color: white;
margin: 0 auto;
}
._jgbox {
width: 100%;
background: #fff;
box-sizing: border-box;
padding: 0px 15px;
display: flex;
flex-wrap: wrap;
margin: 10px auto;
}
.title-img {
text-align: center;
image {
height: 30px;
width: 100%;
}
}
._gbox {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
._ns {
width: 33%;
text-align: center;
margin: 10px auto;
}
._yjbox {
width: 100%;
background: #fff;
box-sizing: border-box;
}
._bgox {
width: 25%;
text-align: center;
font-size: 14px;
color: #333333;
margin: 10px auto;
image {
width: 50px;
height: 50px;
}
}
._lv {
color: #6DD400 !important;
}
._red {
color: #E02020 !important;
}
._tbox {
border-radius: 10px;
background: #fff;
width: 100%;
}
._btop {
box-sizing: border-box;
padding: 15px;
border-bottom: 1px solid #EEEEEE;
text-align: center;
font-weight: 600;
font-size: 14px;
color: #333333;
}
._bbox {
box-sizing: border-box;
padding: 15px;
font-weight: 400;
font-size: 14px;
color: #333333;
line-height: 18px;
}
.b_title {
font-weight: bold;
}
.b-cen {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
._d_anniu {
width: 90px;
height: 30px;
border-radius: 15px;
border: 1px solid #FA6400;
display: flex;
align-items: center;
justify-content: center;
color: #FA6400;
margin-right: 20px;
}
._s_anniu {
width: 90px;
height: 30px;
border-radius: 15px;
border: 1px solid #FA6400;
background: #FA6400;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
</style>