修改
This commit is contained in:
浅念
+322
-464
@@ -1,489 +1,347 @@
|
||||
<template>
|
||||
<view class="home-page">
|
||||
<z-paging ref="paging" :auto="false" v-model="contList" @query="queryList" empty-view-text="暂无数据！">
|
||||
<!-- <template #top> -->
|
||||
<!-- 轮播Banner -->
|
||||
<swiper class="banner-swiper" circular autoplay :interval="4000" indicator-dots indicator-color="rgba(255,255,255,.4)"
|
||||
indicator-active-color="#3F435B">
|
||||
<swiper-item v-for="(banner,index) in bannerList" :key="index">
|
||||
<image class="banner-img" :src="banner.image_url_pull" mode="aspectFill"></image>
|
||||
<!-- <view class="banner-desc">
|
||||
<text class="slogan-text">{{banner.slogan}}</text>
|
||||
</view> -->
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- </template> -->
|
||||
<!-- 内容网格 -->
|
||||
<view class="content-grid">
|
||||
<square-post-card
|
||||
class="grid-item"
|
||||
v-for="sitem in contList"
|
||||
:key="sitem.id"
|
||||
:item="sitem"
|
||||
:isshow="false"
|
||||
@view="navToList"
|
||||
@comment="viewPost"
|
||||
@like="viewPost" />
|
||||
<view class="page">
|
||||
<z-paging ref="paging" :auto="false" v-model="list" @query="queryList" empty-view-text="暂无数据！">
|
||||
<!-- 顶部背景 -->
|
||||
<view class="header">
|
||||
<image src="/static/image/homebg.png" mode="aspectFill" class="bg"></image>
|
||||
|
||||
<!-- 弹幕组件 -->
|
||||
<danmu :list="danmuList" :row="5" :visible="danmuVisible"></danmu>
|
||||
|
||||
<!-- 标题 -->
|
||||
<view class="title">
|
||||
<view>西门子样机</view>
|
||||
<view>福利平台</view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧按钮 -->
|
||||
<view class="right-btns">
|
||||
<view class="circle-btn" :class="{ active: danmuVisible }" @click="toggleDanmu">
|
||||
<image v-if="danmuVisible" src="/static/image/dan1.png" mode=""></image>
|
||||
<image v-else src="/static/image/danm.png" mode=""></image>
|
||||
</view>
|
||||
<view class="circle-btn">
|
||||
<image src="/static/image/shares.png" class="share" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
|
||||
<view class="main-box">
|
||||
<view class="titles">
|
||||
样机广场
|
||||
</view>
|
||||
<view class="tabs">
|
||||
<view :class="['tab',activeTab==0?'on':'']" @tap="tabclick(0)">
|
||||
<text>最新发布</text>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view :class="['tab',activeTab==1?'on':'']" @tap="tabclick(1)">
|
||||
<text>距离最近</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户卡片 -->
|
||||
<view class="card">
|
||||
<post-card
|
||||
v-for="sitem in list"
|
||||
:key="sitem.id || sitem.username"
|
||||
:item="sitem"
|
||||
@userClick="goto"
|
||||
@view="goto"
|
||||
@contact="handleContact"
|
||||
@comment="handleComment">
|
||||
</post-card>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</z-paging>
|
||||
|
||||
<u-popup :show="show" :closeOnClickOverlay="false" :round="20" mode="center">
|
||||
<view class="popupcontent">
|
||||
<image class="log1" src="/static/image/log1.png"></image>
|
||||
<view class="title">{{$t('home.loginmsg')}}</view>
|
||||
<view class="yhxy">
|
||||
<checkbox-group name="" style="width: 28px;display: inline-block;">
|
||||
<label @tap="selfChangde()">
|
||||
<checkbox :checked="selfChecked" activeBackgroundColor="#3F435B"
|
||||
style="transform:scale(0.7);border-radius: 50%" />
|
||||
</label>
|
||||
</checkbox-group>
|
||||
{{$t('home.argin')}}<text class="xy" @click="gouser">{{$t('home.UserAgreement')}}</text>{{$t('home.and')}}<text
|
||||
class="xy" @click="goprivacy">{{$t('home.Privacy')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cent">
|
||||
<button class="btn1" @click="show = !show">{{$t('cancel')}}</button>
|
||||
<button v-if="selfChecked" class="btn" open-type="getPhoneNumber" @click="show = !show"
|
||||
@getphonenumber="getPhoneNumber">{{$t('login')}}</button>
|
||||
<button v-else class="btn" @click="loginbtn">{{$t('login')}}</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<u-picker :immediateChange="true" :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" @close="close('showlang')"
|
||||
:show="showlang" :columns="columns" @cancel="cancellang" @confirm="confirmlang" :title="$t('home.langbtn')" keyName="label"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
import SquarePostCard from '@/components/SquarePostCard.vue'
|
||||
export default {
|
||||
components: {
|
||||
SquarePostCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello',
|
||||
selfChecked: false,
|
||||
home: this.$t('tabbar.home'),
|
||||
is_login:uni.getStorageSync('is_login'),
|
||||
show: false,
|
||||
showlang: false,
|
||||
searchKeyword: '',
|
||||
bannerList: [],
|
||||
contList: [],
|
||||
columns: [
|
||||
[{
|
||||
label: this.$t('zh'),
|
||||
id: 'zh'
|
||||
}, {
|
||||
label: this.$t('en'),
|
||||
id: 'en'
|
||||
},{
|
||||
label: this.$t('ru'),
|
||||
id: 'ru'
|
||||
}]
|
||||
],
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// if(uni.getStorageSync('token')){
|
||||
// // this.$refs.paging && this.$refs.paging.reload()
|
||||
// }else{
|
||||
// this.mini_login()
|
||||
// }
|
||||
if (!uni.getStorageSync('token')) {
|
||||
this.mini_login().then(() => {
|
||||
this.bannerListfn()
|
||||
this.$refs.paging && this.$refs.paging.reload()
|
||||
})
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
uni.setTabBarItem({
|
||||
index: 0,
|
||||
text: this.$t('tabbar.home')
|
||||
})
|
||||
uni.setTabBarItem({
|
||||
index:1,
|
||||
text: this.$t('tabbar.square')
|
||||
})
|
||||
uni.setTabBarItem({
|
||||
index: 2,
|
||||
text: this.$t('tabbar.publish')
|
||||
})
|
||||
uni.setTabBarItem({
|
||||
index: 3,
|
||||
text: this.$t('tabbar.mine')
|
||||
})
|
||||
if(uni.getStorageSync('token')){
|
||||
this.bannerListfn()
|
||||
import danmu from '@/components/danmu/danmu.vue';
|
||||
import PostCard from '@/components/PostCard.vue'
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
components: { danmu, PostCard },
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
danmuVisible:true,
|
||||
content:'',
|
||||
list:[],
|
||||
danmuList: [],
|
||||
latitude:'',
|
||||
longitude:''
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// 数据加载逻辑
|
||||
if (!uni.getStorageSync('token')) {
|
||||
this.mini_login().then(() => {
|
||||
this.barragelist()
|
||||
this.$refs.paging && this.$refs.paging.reload()
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.barragelist()
|
||||
this.$refs.paging && this.$refs.paging.reload()
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getFuzzy().then(res => {
|
||||
this.latitude = res.latitude
|
||||
this.longitude = res.longitude
|
||||
console.log(res);
|
||||
}).catch(err => console.error(err));
|
||||
},
|
||||
methods: {
|
||||
getFuzzy() {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.getSetting({
|
||||
success: (st) => {
|
||||
const ok = st.authSetting['scope.userFuzzyLocation'];
|
||||
const run = () => wx.getFuzzyLocation({
|
||||
type: 'wgs84',
|
||||
success: resolve,
|
||||
fail: reject
|
||||
});
|
||||
|
||||
if (ok) return run();
|
||||
|
||||
wx.authorize({
|
||||
scope: 'scope.userFuzzyLocation',
|
||||
success: run,
|
||||
fail: () => wx.openSetting({ success: () => reject(new Error('未授权')) })
|
||||
});
|
||||
},
|
||||
fail: reject
|
||||
});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
async initPage(){
|
||||
await this.mini_login()
|
||||
await this.bannerListfn()
|
||||
},
|
||||
bannerListfn(){
|
||||
request({
|
||||
url:'common/banner/list',
|
||||
method:'get',
|
||||
data:{
|
||||
module:'home_module'
|
||||
}
|
||||
}).then(res => {
|
||||
this.bannerList = res.data.data
|
||||
})
|
||||
},
|
||||
// 点击商品项
|
||||
navToList(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/square/detiles?id='+item.id
|
||||
});
|
||||
},
|
||||
viewPost(item){
|
||||
if(uni.getStorageSync('is_login')){
|
||||
tabclick(item){
|
||||
this.activeTab = item;
|
||||
this.$refs.paging && this.$refs.paging.reload()
|
||||
},
|
||||
//获取弹幕
|
||||
barragelist(){
|
||||
request({
|
||||
url: 'admin/barrage/list',
|
||||
method: 'GET',
|
||||
}).then(res => {
|
||||
if (res.data.code === 200) {
|
||||
this.danmuList = res.data.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
toggleDanmu() {
|
||||
this.danmuVisible = !this.danmuVisible;
|
||||
},
|
||||
goto(item){
|
||||
uni.navigateTo({
|
||||
url: '/pages/square/detiles?id='+item.id
|
||||
});
|
||||
},
|
||||
handleContact(item) {
|
||||
uni.showToast({
|
||||
title: '联系门店功能',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
handleComment(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/square/detiles?id=' + (item?.id || 1)
|
||||
});
|
||||
},
|
||||
queryList(pageNo, pageSize, from) {
|
||||
this.loading = true;
|
||||
var that = this;
|
||||
const params = {
|
||||
current:pageNo,
|
||||
size:10
|
||||
};
|
||||
const collectUrl = this.activeTab==0 ? 'common/post/list' : 'common/post/nearby'
|
||||
// 添加排序参数（如果后端支持）
|
||||
if(this.activeTab==1){
|
||||
params.lng = this.longitude;
|
||||
params.lat = this.latitude;
|
||||
} else {
|
||||
}
|
||||
request({
|
||||
url:collectUrl,
|
||||
method:'get',
|
||||
data: params
|
||||
}).then(res => {
|
||||
if(res.data.code ==200){
|
||||
var datas = res.data.data.records;
|
||||
this.$refs.paging.complete(datas);
|
||||
}else{
|
||||
this.show = true
|
||||
}
|
||||
},
|
||||
cancellang() {
|
||||
this.showlang = false
|
||||
},
|
||||
close(value){
|
||||
this[value] = false
|
||||
},
|
||||
queryList(pageNo, pageSize) {
|
||||
this.loading = true;
|
||||
var that = this;
|
||||
request({
|
||||
url:'common/post/list',
|
||||
method:'get',
|
||||
data: {
|
||||
current:pageNo,
|
||||
size:10
|
||||
}
|
||||
}).then(res => {
|
||||
if(res.data.code ==200){
|
||||
var datas = res.data.data.records;
|
||||
this.$refs.paging.complete(datas);
|
||||
}else{
|
||||
// this.$refs.paging.complete(null);
|
||||
// that.listlength=0
|
||||
}
|
||||
uni.stopPullDownRefresh();
|
||||
//
|
||||
})
|
||||
},
|
||||
//语言切换事件
|
||||
confirmlang(e) {
|
||||
var that = this
|
||||
this.$i18n.locale = e.value[0].id
|
||||
uni.setLocale(e.value[0].id)
|
||||
uni.setStorageSync('i18locale', e.value[0].id);
|
||||
this.columns =[
|
||||
[{
|
||||
label: this.$t('zh'),
|
||||
id: 'zh'
|
||||
}, {
|
||||
label: this.$t('en'),
|
||||
id: 'en'
|
||||
},{
|
||||
label: this.$t('ru'),
|
||||
id: 'ru'
|
||||
}]
|
||||
];
|
||||
uni.setTabBarItem({
|
||||
index: 0,
|
||||
text: this.$t('tabbar.square')
|
||||
})
|
||||
uni.setTabBarItem({
|
||||
index: 1,
|
||||
text: this.$t('tabbar.publish')
|
||||
})
|
||||
uni.setTabBarItem({
|
||||
index: 2,
|
||||
text: this.$t('tabbar.mine')
|
||||
})
|
||||
this.showlang = false
|
||||
var languages = e.value[0].id
|
||||
if(e.value[0].id=='zh'){
|
||||
languages= 'zh_CN'
|
||||
}
|
||||
request({
|
||||
url:'user/update',
|
||||
method:'POST',
|
||||
data:{
|
||||
language:languages
|
||||
}
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
})
|
||||
},
|
||||
goprivacy(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreement',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
gouser(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreementuser',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
addCar(){
|
||||
if(uni.getStorageSync('is_login')){
|
||||
uni.removeStorageSync('draftid')
|
||||
uni.removeStorageSync('carinfo')
|
||||
uni.navigateTo({
|
||||
url: '/pages/carinfo/index'
|
||||
});
|
||||
}else{
|
||||
this.show = true
|
||||
}
|
||||
},
|
||||
selfChangde(e) {
|
||||
this.selfChecked = !this.selfChecked;
|
||||
},
|
||||
loginbtn(){
|
||||
if(!this.selfChecked){
|
||||
uni.showToast({
|
||||
title:this.$t('home.arginimg'),
|
||||
icon: 'none'
|
||||
});
|
||||
return false
|
||||
}
|
||||
},
|
||||
getPhoneNumber(e) {
|
||||
let that = this;
|
||||
request({
|
||||
url:'miniapp/phone',
|
||||
method:'POST',
|
||||
data:{
|
||||
phone_code: e.detail.code,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == -1) {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
} else if (res.data.code == 200) {
|
||||
//返回数据接收成功
|
||||
uni.setStorageSync('is_login', true);
|
||||
}
|
||||
})
|
||||
},
|
||||
mini_login() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: loginRes => {
|
||||
|
||||
// 一定要 return，不然 Promise 不会等待
|
||||
return request({
|
||||
url:'miniapp/login',
|
||||
method:'POST',
|
||||
data:{ code: loginRes.code }
|
||||
}).then(res => {
|
||||
|
||||
if (res.data.code === 200) {
|
||||
|
||||
uni.setStorageSync('openid', res.data.data.openid);
|
||||
uni.setStorageSync('token', res.data.data.token);
|
||||
|
||||
if (res.data.data.mobile) {
|
||||
uni.setStorageSync('is_login', true);
|
||||
} else {
|
||||
uni.setStorageSync('is_login', false);
|
||||
}
|
||||
|
||||
resolve(true); // 👍 一定在 Promise 中
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
reject(res);
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '获取 code 失败',
|
||||
icon: 'none'
|
||||
});
|
||||
reject(err); // 👍 必须 reject
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
}
|
||||
uni.stopPullDownRefresh();
|
||||
//
|
||||
})
|
||||
},
|
||||
mini_login() {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: loginRes => {
|
||||
|
||||
// 一定要 return，不然 Promise 不会等待
|
||||
return request({
|
||||
url:'miniapp/login',
|
||||
method:'POST',
|
||||
data:{ code: loginRes.code }
|
||||
}).then(res => {
|
||||
if (res.data.code === 200) {
|
||||
|
||||
uni.setStorageSync('openid', res.data.data.openid);
|
||||
uni.setStorageSync('token', res.data.data.token);
|
||||
|
||||
if (res.data.data.mobile) {
|
||||
uni.setStorageSync('is_login', true);
|
||||
} else {
|
||||
uni.setStorageSync('is_login', false);
|
||||
}
|
||||
|
||||
resolve(true); // 👍 一定在 Promise 中
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
reject(res);
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '获取 code 失败',
|
||||
icon: 'none'
|
||||
});
|
||||
reject(err); // 👍 必须 reject
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.home-page{
|
||||
min-height: 100vh;
|
||||
background: #F5F6FA;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
.brand-header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
background: #F5F6FA;
|
||||
}
|
||||
.brand-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.brand-text{
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.sun-icon{
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: #FFB800;
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
height: 720rpx;
|
||||
}
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom-left-radius: 30rpx;
|
||||
border-bottom-right-radius: 30rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 40rpx;
|
||||
top: 300rpx;
|
||||
font-size: 68rpx;
|
||||
line-height: 1.2;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.right-btns {
|
||||
position: absolute;
|
||||
right: 40rpx;
|
||||
bottom: 100rpx;
|
||||
|
||||
.circle-btn {
|
||||
margin-top: 20rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.brand-right{
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #3F435B;
|
||||
}
|
||||
.banner-swiper{
|
||||
width: 100%;
|
||||
height: 430rpx;
|
||||
}
|
||||
.banner-img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.banner-desc{
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
bottom: 60rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
.slogan-text{
|
||||
display: block;
|
||||
font-size: 48rpx;
|
||||
font-weight: 600;
|
||||
color: #51B6FF;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
|
||||
}
|
||||
.content-grid{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 20rpx;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
}
|
||||
.grid-item{
|
||||
width: 48%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.grid-image{
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
background: #E5E5E5;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.grid-footer{
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
image{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
.share{
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
}
|
||||
.grid-avatar{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.grid-info{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 87%;
|
||||
}
|
||||
.grid-tag{
|
||||
font-size: 24rpx;
|
||||
color: #3F435B;
|
||||
margin-bottom: 4rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 95%;
|
||||
}
|
||||
.grid-name{
|
||||
font-size: 22rpx;
|
||||
color: #8A8D97;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 88%;
|
||||
}
|
||||
.popupcontent{
|
||||
background-size: 100% 100%;
|
||||
padding: 26px 15px;
|
||||
}
|
||||
/* 激活状态（弹幕开启） */
|
||||
.circle-btn.active {
|
||||
background: #00c28a;
|
||||
color: #fff;
|
||||
}
|
||||
.main-box {
|
||||
margin: 20rpx 30rpx;
|
||||
margin-top: -60rpx;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 30rpx;
|
||||
.titles{
|
||||
font-size: 34rpx;
|
||||
text-align: center;
|
||||
background-repeat: no-repeat;
|
||||
.title{
|
||||
color: #333333;
|
||||
font-size: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
line-height: 88rpx;
|
||||
}
|
||||
.log1{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.tab {
|
||||
position: relative;
|
||||
padding: 12rpx 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
}
|
||||
.yhxy{
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
.xy{
|
||||
color: #297EFF;
|
||||
}
|
||||
.tab::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -10rpx;
|
||||
width: 60rpx;
|
||||
height: 4rpx;
|
||||
background: #3BC6BD;
|
||||
border-radius: 4rpx;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.cent{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0px 10px 20px;
|
||||
.btn1{
|
||||
background-color: #fff;
|
||||
border: 1px solid #206ff4;
|
||||
color: #206ff4;
|
||||
border-radius: 50px;
|
||||
width: 46%;
|
||||
margin: 10px 0px 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.btn{
|
||||
background-color: #206ff4;
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 46%;
|
||||
margin: 10px 0px 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.tab.on {
|
||||
color: #3BC6BD;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
.tab.on::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1px;
|
||||
height: 24rpx;
|
||||
background: #dcdcdc;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 10rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user