调整ui
This commit is contained in:
@@ -4,10 +4,9 @@
|
||||
<view class="user-header u-flex u-p-30">
|
||||
<u-avatar :src="avatar" size="100"></u-avatar>
|
||||
<view class="user-info u-m-l-20">
|
||||
<!-- <view class="u-font-18 u-m-b-10">{{ userName }}</view> -->
|
||||
<view class="u-font-18 u-m-b-10">吴康桥</view>
|
||||
<view class="user-tag">用户类型: 个人</view>
|
||||
<view class="user-tag">系统认证：已认证</view>
|
||||
<view class="u-font-18 u-m-b-10">{{vuex_user.nickName}}</view>
|
||||
<view class="user-tag">用户类型: {{userType === '0' ? '个人' : '组织'}}</view>
|
||||
<view class="user-tag">系统认证：{{oaAuth === '1' ? '已认证' : '未认证'}}</view>
|
||||
</view>
|
||||
<view class="msg-setting">
|
||||
<view class="u-relative u-m-r-20" @click="toMessage()">
|
||||
@@ -35,301 +34,523 @@
|
||||
</u-row>
|
||||
<view class="vip-upgrade-btn" @click="upgrade">超值优惠 升级立享</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 功能网格 -->
|
||||
<!-- <view class="function-grid u-m-t-30">
|
||||
<u-grid :col="4" :border="false">
|
||||
<u-grid-item v-for="(item,index) in gridList" :key="index" @click="clickNav(item.url)">
|
||||
<u-icon :name="item.icon" size="65" color="#333"></u-icon>
|
||||
<text class="u-font-14 u-m-t-10" >{{ item.name }}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view> -->
|
||||
<!-- <view class="function-grid">
|
||||
<swiper
|
||||
:indicator-dots="true"
|
||||
class="swiper"
|
||||
>
|
||||
<swiper-item>
|
||||
<u-grid :border="false">
|
||||
<u-grid-item
|
||||
:customStyle="{width:220+'rpx',height:220+'rpx'}"
|
||||
v-for="(item, index) in gridList"
|
||||
:index="index"
|
||||
:key="index"
|
||||
>
|
||||
<u-icon
|
||||
:customStyle="{paddingTop:20+'rpx'}"
|
||||
:name="item.icon"
|
||||
size="46" color="#333"
|
||||
></u-icon>
|
||||
<text class="u-font-14 u-m-t-10">{{item.name}}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<u-grid :border="false">
|
||||
<u-grid-item
|
||||
:customStyle="{width:220+'rpx',height:220+'rpx'}"
|
||||
v-for="(item, index) in gridList"
|
||||
:index="index + 9"
|
||||
:key="index"
|
||||
>
|
||||
<u-icon
|
||||
:customStyle="{paddingTop:20+'rpx'}"
|
||||
:name="item.icon"
|
||||
size="46" color="#333"
|
||||
></u-icon>
|
||||
<text class="u-font-14 u-m-t-10">{{item.name}}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<u-grid :border="false">
|
||||
<u-grid-item
|
||||
:customStyle="{width:220+'rpx',height:220+'rpx'}"
|
||||
v-for="(item, index) in gridList"
|
||||
:index="index + 18"
|
||||
:key="index"
|
||||
>
|
||||
<u-icon
|
||||
:customStyle="{paddingTop:20+'rpx'}"
|
||||
:name="item.icon"
|
||||
size="46" color="#333"
|
||||
></u-icon>
|
||||
<text class="u-font-14 u-m-t-10">{{item.name}}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view> -->
|
||||
<view class="center-nav">
|
||||
<u-row>
|
||||
<u-col span="3" text-align="center" v-for="(item,index) in gridList" :key="index">
|
||||
<view v-if="item.name=='问题反馈'">
|
||||
<!-- 调用微信反馈功能 -->
|
||||
<button type="default" open-type="feedback" class="clearBtn" hover-class="none" style="background-color: #FFFFFF;">
|
||||
<u-icon :name="item.icon" color="#909399" size="50"></u-icon>
|
||||
<view class="tabName" style="padding-top: 15rpx;">{{item.name}}</view>
|
||||
</button>
|
||||
</view>
|
||||
<view @click="clickNav(item.url)" v-else>
|
||||
<image :src="item.icon" style="width: 80rpx;height: 80rpx;" mode="widthFix"></image>
|
||||
<view class="tabName">{{item.name}}</view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
<!-- 分隔条广告 -->
|
||||
<!-- <view class="ad-banner u-m-t-20">
|
||||
<image src="/static/ad-banner.png" mode="widthFix" style="width: 100%; border-radius: 12rpx;"></image>
|
||||
</view> -->
|
||||
|
||||
<!-- 其他功能列表 -->
|
||||
<view class="other-list u-m-t-20 cell-group">
|
||||
<view class="user-content">
|
||||
<!-- 功能网格 -->
|
||||
<!-- <view class="function-grid u-m-t-30">
|
||||
<u-grid :col="4" :border="false">
|
||||
<u-grid-item v-for="(item,index) in gridList" :key="index" @click="clickNav(item.url)">
|
||||
<u-icon :name="item.icon" size="65" color="#333"></u-icon>
|
||||
<text class="u-font-14 u-m-t-10" >{{ item.name }}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view> -->
|
||||
<!-- <view class="function-grid">
|
||||
<swiper
|
||||
:indicator-dots="true"
|
||||
class="swiper"
|
||||
>
|
||||
<swiper-item>
|
||||
<u-grid :border="false">
|
||||
<u-grid-item
|
||||
:customStyle="{width:220+'rpx',height:220+'rpx'}"
|
||||
v-for="(item, index) in gridList"
|
||||
:index="index"
|
||||
:key="index"
|
||||
>
|
||||
<u-icon
|
||||
:customStyle="{paddingTop:20+'rpx'}"
|
||||
:name="item.icon"
|
||||
size="46" color="#333"
|
||||
></u-icon>
|
||||
<text class="u-font-14 u-m-t-10">{{item.name}}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<u-grid :border="false">
|
||||
<u-grid-item
|
||||
:customStyle="{width:220+'rpx',height:220+'rpx'}"
|
||||
v-for="(item, index) in gridList"
|
||||
:index="index + 9"
|
||||
:key="index"
|
||||
>
|
||||
<u-icon
|
||||
:customStyle="{paddingTop:20+'rpx'}"
|
||||
:name="item.icon"
|
||||
size="46" color="#333"
|
||||
></u-icon>
|
||||
<text class="u-font-14 u-m-t-10">{{item.name}}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<u-grid :border="false">
|
||||
<u-grid-item
|
||||
:customStyle="{width:220+'rpx',height:220+'rpx'}"
|
||||
v-for="(item, index) in gridList"
|
||||
:index="index + 18"
|
||||
:key="index"
|
||||
>
|
||||
<u-icon
|
||||
:customStyle="{paddingTop:20+'rpx'}"
|
||||
:name="item.icon"
|
||||
size="46" color="#333"
|
||||
></u-icon>
|
||||
<text class="u-font-14 u-m-t-10">{{item.name}}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view> -->
|
||||
<view class="center-nav">
|
||||
<u-row>
|
||||
<u-col span="3" text-align="center" v-for="(item,index) in gridList" :key="index">
|
||||
<view v-if="item.name=='问题反馈'">
|
||||
<!-- 调用微信反馈功能 -->
|
||||
<button type="default" open-type="feedback" class="clearBtn" hover-class="none"
|
||||
style="background-color: #FFFFFF;">
|
||||
<u-icon :name="item.icon" color="#909399" size="50"></u-icon>
|
||||
<view class="tabName" style="padding-top: 15rpx;">{{item.name}}</view>
|
||||
</button>
|
||||
</view>
|
||||
<view @click="clickNav(item.url)" v-else>
|
||||
<image :src="item.icon" style="width: 80rpx;height: 80rpx;" mode="widthFix"></image>
|
||||
<view class="tabName">{{item.name}}</view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
<!-- 分隔条广告 -->
|
||||
<!-- <view class="ad-banner u-m-t-20">
|
||||
<image src="/static/ad-banner.png" mode="widthFix" style="width: 100%; border-radius: 12rpx;"></image>
|
||||
</view> -->
|
||||
|
||||
<UCellItemPlus
|
||||
v-for="(item, index) in cellList"
|
||||
:key="index"
|
||||
:title="item.title"
|
||||
:icon="item.icon"
|
||||
arrow
|
||||
@click="clickNav(item.url)"
|
||||
/>
|
||||
<!-- 其他功能列表 -->
|
||||
<view class="other-list u-m-t-20 cell-group">
|
||||
<!-- 功能网格 -->
|
||||
|
||||
<view class="function-grid">
|
||||
<swiper
|
||||
:indicator-dots="true"
|
||||
class="swiper"
|
||||
>
|
||||
<swiper-item>
|
||||
<u-grid :border="false">
|
||||
<u-grid-item
|
||||
:customStyle="{width:220+'rpx',height:220+'rpx'}"
|
||||
v-for="(item, index) in cellList"
|
||||
:index="index"
|
||||
:key="index"
|
||||
v-if="index < 9"
|
||||
@click="clickNav(item.url)"
|
||||
>
|
||||
<!-- <u-icon
|
||||
:customStyle="{paddingTop:20+'rpx'}"
|
||||
:name="item.icon"
|
||||
size="46" color="#333"
|
||||
></u-icon> -->
|
||||
<image :src="item.icon" style="width: 50px;height: 50rpx;" mode="widthFix"></image>
|
||||
<text class="u-font-14 u-m-t-10">{{item.name}}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<u-grid :border="false">
|
||||
<u-grid-item
|
||||
:customStyle="{width:220+'rpx',height:220+'rpx'}"
|
||||
v-for="(item, index) in cellList"
|
||||
:index="index + 9"
|
||||
v-if="index >= 9 && index < 18 "
|
||||
:key="index"
|
||||
@click="clickNav(item.url)"
|
||||
>
|
||||
<!-- <u-icon
|
||||
:customStyle="{paddingTop:20+'rpx'}"
|
||||
:name="item.icon"
|
||||
size="46" color="#333"
|
||||
></u-icon> -->
|
||||
<image :src="item.icon" style="width: 50px;height: 50rpx;" mode="widthFix"></image>
|
||||
<text class="u-font-14 u-m-t-10">{{item.name}}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<u-grid :border="false">
|
||||
<u-grid-item
|
||||
:customStyle="{width:220+'rpx',height:220+'rpx'}"
|
||||
v-for="(item, index) in cellList"
|
||||
:index="index + 18"
|
||||
:key="index"
|
||||
@click="clickNav(item.url)"
|
||||
>
|
||||
<!-- <u-icon
|
||||
:customStyle="{paddingTop:20+'rpx'}"
|
||||
:name="item.icon"
|
||||
size="46" color="#333"
|
||||
></u-icon> -->
|
||||
<image :src="item.icon" style="width: 50px;height: 50rpx;" mode="widthFix"></image>
|
||||
<text class="u-font-14 u-m-t-10">{{item.name}}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<!-- <u-popup v-model="showGetProfile" mode="center" border-radius="20">
|
||||
<view class="popup-content">
|
||||
<view class="title">获取头像</view>
|
||||
<view class="desc">获取微信头像与昵称用于展示</view>
|
||||
|
||||
<button class="auth-btn" @click="getWxProfile">
|
||||
授权获取头像
|
||||
</button>
|
||||
</view>
|
||||
</u-popup> -->
|
||||
|
||||
<!-- <UCellItemPlus v-for="(item, index) in cellList" :key="index" :title="item.name" :icon="item.icon" arrow
|
||||
@click="clickNav(item.url)" /> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UCellItemPlus from "../../components/ucellitem/UCellItemPlus.vue";
|
||||
import config from "@/common/config.js";
|
||||
import UCellItemPlus from "../../components/ucellitem/UCellItemPlus.vue";
|
||||
import config from "@/common/config.js";
|
||||
|
||||
export default {
|
||||
components: { UCellItemPlus },
|
||||
export default {
|
||||
components: {
|
||||
UCellItemPlus
|
||||
},
|
||||
|
||||
data() {
|
||||
const life = uni.getStorageSync('lifeData') || {}
|
||||
const user = (life.vuex_user && life.vuex_user.user) || {}
|
||||
data() {
|
||||
const life = uni.getStorageSync('lifeData') || {}
|
||||
const user = (life.vuex_user && life.vuex_user.user) || {}
|
||||
|
||||
return {
|
||||
user, // user 信息放这里即可
|
||||
show: true,
|
||||
gridList: [
|
||||
{name:"我的合同",icon:"../../static/icon/我的合同.png",url:"pages/center/history"},
|
||||
{name:"我的账单",icon:"../../static/icon/我的账单.png",url:"pages/bill/bill"},
|
||||
{name:"我的待付",icon:"../../static/icon/我的待付.png",url:"pages/unpaid/unpaid"},
|
||||
{name:"水电缴费",icon:"../../static/icon/水电缴费.png",url:"pages/wae/wae"}
|
||||
],
|
||||
cellList: [
|
||||
{title:"我的租赁资产",icon:"star",url:"pages/center/myLease"},
|
||||
{title:"我的预约",icon:"star",url:"pages/reserve/reserveRecords"},
|
||||
{title:"缴费记录",icon:"star",url:"pages/bill/payHistory"},
|
||||
{title:"水电费明细",icon:"star",url:"pages/wae/waeRecords"}
|
||||
]
|
||||
}
|
||||
},
|
||||
return {
|
||||
user, // user 信息放这里即可
|
||||
show: true,
|
||||
showGetProfile: false,
|
||||
userType:'',
|
||||
oaAuth:'',
|
||||
gridList: [{
|
||||
name: "我的合同",
|
||||
icon: "/static/icon/sign.png",
|
||||
url: "pages/center/history"
|
||||
},
|
||||
{
|
||||
name: "我的账单",
|
||||
icon: "../../static/icon/账单.png",
|
||||
url: "pages/bill/bill"
|
||||
},
|
||||
{
|
||||
name: "我的待付",
|
||||
icon: "../../static/icon/待付款.png",
|
||||
url: "pages/unpaid/unpaid"
|
||||
},
|
||||
{
|
||||
name: "水电缴费",
|
||||
icon: "../../static/icon/水电费.png",
|
||||
url: "pages/wae/wae"
|
||||
}
|
||||
],
|
||||
cellList: [{
|
||||
name: "我的租赁资产",
|
||||
icon: "/static/icon/住房C.png",
|
||||
url: "pages/center/myLease"
|
||||
},
|
||||
{
|
||||
name: "我的预约",
|
||||
icon: "/static/icon/预约.png",
|
||||
url: "pages/reserve/reserveRecords"
|
||||
},
|
||||
{
|
||||
name: "缴费记录",
|
||||
icon: "/static/icon/账本.png",
|
||||
url: "pages/bill/payHistory"
|
||||
},
|
||||
{
|
||||
name: "水电费明细",
|
||||
icon: "/static/icon/书签.png",
|
||||
url: "pages/wae/waeRecords"
|
||||
},
|
||||
{
|
||||
name: "留言板",
|
||||
icon: "/static/icon/留言纸.png",
|
||||
url: "pages/wae/waeRecords"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
avatar() {
|
||||
const life = uni.getStorageSync('lifeData') || {}
|
||||
const user = (life.vuex_user && life.vuex_user.user) || {}
|
||||
const raw = user.avatar || ""
|
||||
computed: {
|
||||
avatar() {
|
||||
const life = uni.getStorageSync('lifeData') || {}
|
||||
const user = life.vuex_user || {}
|
||||
const raw = user.avatarUrl
|
||||
|
||||
if (!raw) return "/static/images/default-avatar.png"
|
||||
if (!raw) return raw
|
||||
|
||||
return raw.includes(config.staticUrl)
|
||||
? raw
|
||||
: config.staticUrl + raw
|
||||
}
|
||||
},
|
||||
return raw.includes(config.staticUrl) ?
|
||||
raw :
|
||||
config.staticUrl + raw
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
uni.$on('updateAvatar', () => {
|
||||
this.updateAvatar();
|
||||
})
|
||||
},
|
||||
onLoad() {
|
||||
uni.$on('updateAvatar', () => {
|
||||
this.updateAvatar();
|
||||
})
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
uni.$off('updateAvatar')
|
||||
},
|
||||
onUnload() {
|
||||
uni.$off('updateAvatar')
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.checkToken();
|
||||
},
|
||||
onShow() {
|
||||
this.checkToken();
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
logout() {
|
||||
this.$u.vuex('vuex_token', '');
|
||||
this.$u.vuex('vuex_user', {});
|
||||
this.$u.route('/pages/login/login')
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
this.$u.vuex('vuex_token', '');
|
||||
this.$u.vuex('vuex_user', {});
|
||||
this.$u.route('/pages/login/login')
|
||||
},
|
||||
|
||||
toMessage() {
|
||||
this.$u.route('/pages/message/message')
|
||||
},
|
||||
toMessage() {
|
||||
this.$u.route('/pages/message/message')
|
||||
},
|
||||
|
||||
toSetting() {
|
||||
this.$u.route('/pages/profile/setting')
|
||||
},
|
||||
toSetting() {
|
||||
this.$u.route('/pages/profile/setting')
|
||||
},
|
||||
|
||||
callPhoneNumber() {
|
||||
uni.makePhoneCall({ phoneNumber: "18720989281" });
|
||||
},
|
||||
callPhoneNumber() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: "18720989281"
|
||||
});
|
||||
},
|
||||
|
||||
aboutMe() {
|
||||
this.$u.route('/pages/profile/aboutMe')
|
||||
},
|
||||
aboutMe() {
|
||||
this.$u.route('/pages/profile/aboutMe')
|
||||
},
|
||||
|
||||
toMyLease() {
|
||||
this.$u.route('/pages/center/myLease')
|
||||
},
|
||||
toMyLease() {
|
||||
this.$u.route('/pages/center/myLease')
|
||||
},
|
||||
checkToken() {
|
||||
let lifeData = uni.getStorageSync('lifeData');
|
||||
let token = lifeData.vuex_token
|
||||
if (!token || token === null || token === undefined ||
|
||||
(typeof token === 'object' && Object.keys(token).length === 0)) {
|
||||
console.log("登录态不存在")
|
||||
return uni.reLaunch({
|
||||
url: '../login/login'
|
||||
})
|
||||
}
|
||||
let url = "/login/checkExpiration";
|
||||
this.$u.get(url, {}, {'WT': token}).then(obj => {
|
||||
if (obj.data) {
|
||||
uni.reLaunch({
|
||||
url: '../login/login'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
checkToken() {
|
||||
let lifeData = uni.getStorageSync('lifeData') || {};
|
||||
let token = lifeData.vuex_token
|
||||
clickNav(url) {
|
||||
if (url) {
|
||||
this.$u.route(url);
|
||||
} else {
|
||||
this.$mytip.toast('敬请期待')
|
||||
}
|
||||
},
|
||||
|
||||
if (!token) {
|
||||
console.log("登录态不存在")
|
||||
return uni.reLaunch({ url:'../login/login' })
|
||||
}
|
||||
updateAvatar() {
|
||||
// 触发 computed 自动更新
|
||||
this.$forceUpdate()
|
||||
},
|
||||
// 进入个人中心时判断是否需要补充资料
|
||||
checkNeedProfile() {
|
||||
let life = uni.getStorageSync('lifeData') || {}
|
||||
let user = life.vuex_user
|
||||
let token = life.vuex_token
|
||||
if (!token) return; // 未登录不弹窗
|
||||
// 没有头像或昵称才弹窗
|
||||
if (!user || !user.avatarUrl || !user.nickName) {
|
||||
this.showGetProfile = true;
|
||||
}
|
||||
},
|
||||
getWxProfile() {
|
||||
uni.getUserProfile({
|
||||
desc: "用于完善个人资料展示",
|
||||
success: res => {
|
||||
const userInfo = res.userInfo;
|
||||
// 存储
|
||||
this.$u.vuex('vuex_user', userInfo);
|
||||
|
||||
let url = "/api/profile/isExpiration";
|
||||
this.$u.get(url,{ token }).then(obj => {
|
||||
if(obj.data){
|
||||
return uni.reLaunch({ url:'../login/login' })
|
||||
}
|
||||
});
|
||||
},
|
||||
// 也可同步调用后端更新头像昵称
|
||||
// this.$u.post('/user/updateWxInfo', userInfo);
|
||||
|
||||
clickNav(url){
|
||||
if(url){
|
||||
this.$u.route(url);
|
||||
}else{
|
||||
this.$mytip.toast('敬请期待')
|
||||
}
|
||||
},
|
||||
|
||||
updateAvatar() {
|
||||
// 触发 computed 自动更新
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
}
|
||||
this.showGetProfile = false;
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: "授权失败",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
getUserOtherInfo() {
|
||||
let life = uni.getStorageSync('lifeData') || {}
|
||||
let token = life.vuex_token
|
||||
let url = "/login/userOtherInfo";
|
||||
this.$u.get(url, {}, {'WT': token}).then(obj => {
|
||||
this.userType = obj.data.userType;
|
||||
this.oaAuth = obj.data.oaAuth;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper {
|
||||
height: 400rpx;
|
||||
}
|
||||
.user-center {
|
||||
background-color: #f7f8fa;
|
||||
min-height: 100vh;
|
||||
padding: 15rpx;
|
||||
}
|
||||
.center-nav{
|
||||
background-color: #FFFFFF;
|
||||
margin-top: 30rpx;
|
||||
padding: 30rpx 0;
|
||||
border-radius: 8px;
|
||||
.tabName{
|
||||
color: #606266;
|
||||
font-size: 26rpx;
|
||||
padding-top: 10rpx;
|
||||
.swiper {
|
||||
height: 700rpx;
|
||||
}
|
||||
}
|
||||
.cell-group {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cell-group > view:not(:last-child) {
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
/* 用户信息卡 */
|
||||
.user-header {
|
||||
align-items: center;
|
||||
margin-top: 200rpx;
|
||||
.user-info {
|
||||
|
||||
.user-tag {
|
||||
background: #f6f6f6;
|
||||
color: #ff8c00;
|
||||
padding: 8rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
width: fit-content;
|
||||
|
||||
.user-center {
|
||||
background-color: #f7f8fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.user-content{
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
position: relative; /* 相对定位不会脱流，仅创建一个 z-index 环境 */
|
||||
z-index: 1;
|
||||
margin: 0 20rpx;
|
||||
margin-top: 12rpx; /* 视觉上插入到延伸背景中，调节数值以适配 */
|
||||
|
||||
}
|
||||
.center-nav {
|
||||
background-color: #FFFFFF;
|
||||
padding: 30rpx 0;
|
||||
border-radius: 8px;
|
||||
|
||||
.tabName {
|
||||
color: black;
|
||||
font-size: 26rpx;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
}
|
||||
.msg-setting {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 85rpx;
|
||||
}
|
||||
}
|
||||
.vip-card {
|
||||
margin: 20rpx;
|
||||
padding: 30rpx;
|
||||
background: linear-gradient(135deg, #1f1f1f 0%, #2a2a2a 100%);
|
||||
border-radius: 20rpx;
|
||||
color: #fff;
|
||||
.vip-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #f8e28e;
|
||||
}
|
||||
.vip-upgrade-btn {
|
||||
margin-top: 30rpx;
|
||||
background: linear-gradient(to right, #ffb347, #ffcc33);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.function-grid {
|
||||
margin: 0 20rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.cell-group {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cell-group>view:not(:last-child) {
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 用户信息卡 */
|
||||
.user-header {
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding-top: 200rpx !important;
|
||||
padding-bottom: 80rpx !important;
|
||||
background: linear-gradient(to right, #89CFF0, #5AA4D1);
|
||||
overflow: visible; /* 必须，否则延伸区域会被裁掉 */
|
||||
.user-info {
|
||||
|
||||
.user-tag {
|
||||
color: black;
|
||||
padding: 8rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-setting {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 85rpx;
|
||||
}
|
||||
}
|
||||
.user-header::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -80rpx;
|
||||
height: 80rpx;
|
||||
background: inherit;
|
||||
border-bottom-left-radius: 40rpx;
|
||||
border-bottom-right-radius: 40rpx;
|
||||
/* 把伪元素放在 header 背景后面 */
|
||||
z-index: 0;
|
||||
}
|
||||
.vip-card {
|
||||
margin: 20rpx;
|
||||
padding: 30rpx;
|
||||
background: linear-gradient(135deg, #1f1f1f 0%, #2a2a2a 100%);
|
||||
border-radius: 20rpx;
|
||||
color: #fff;
|
||||
|
||||
.vip-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #f8e28e;
|
||||
}
|
||||
|
||||
.vip-upgrade-btn {
|
||||
margin-top: 30rpx;
|
||||
background: linear-gradient(to right, #ffb347, #ffcc33);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.function-grid {
|
||||
margin: 0 20rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.auth-btn {
|
||||
width: 80%;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, #4CAF50, #07c160);
|
||||
color: white;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,264 +1,336 @@
|
||||
<template>
|
||||
<view class="contract-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<customNavbar title="我的合同"/>
|
||||
<!-- 顶部筛选栏 -->
|
||||
<u-tabs
|
||||
:list="tabList"
|
||||
:current="currentTab"
|
||||
@change="onTabChange"
|
||||
lineColor="#2979ff"
|
||||
activeColor="#2979ff"
|
||||
></u-tabs>
|
||||
|
||||
<view class="contract-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<customNavbar title="我的合同" />
|
||||
|
||||
<!-- 合同列表 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="scroll-content"
|
||||
@scrolltolower="loadMore"
|
||||
:refresher-enabled="true"
|
||||
:refresher-triggered="isRefreshing"
|
||||
@refresherrefresh="refresh"
|
||||
>
|
||||
<view v-if="contracts.length > 0" class="contract-list">
|
||||
<view
|
||||
class="contract-card"
|
||||
v-for="item in contracts"
|
||||
:key="item.id"
|
||||
@click="goDetail(item)"
|
||||
>
|
||||
<!-- 左侧封面图 -->
|
||||
<image
|
||||
class="contract-cover"
|
||||
:src="item.coverUrl || defaultCover"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<!-- Tabs -->
|
||||
<view class="tab-wrapper">
|
||||
<u-tabs :list="tabList" :current="currentTab" @change="onTabChange" lineColor="#2979ff"
|
||||
activeColor="#2979ff" itemStyle="padding: 0 30rpx;"></u-tabs>
|
||||
</view>
|
||||
|
||||
<!-- 右侧信息 -->
|
||||
<view class="contract-info">
|
||||
<view class="top-row">
|
||||
<text class="asset-name">{{ item.assetName }}</text>
|
||||
<u-icon name="arrow-right" size="28" color="#ccc" />
|
||||
</view>
|
||||
<view class="asset-room">{{ item.assetRoom || '—' }}</view>
|
||||
<view class="date-range">{{ item.startDate }} ~ {{ item.endDate }}</view>
|
||||
|
||||
<DateFilter
|
||||
:start="startDate"
|
||||
:end="endDate"
|
||||
@update:start="startDate = $event"
|
||||
@update:end="endDate = $event"
|
||||
@change="onDateFilterChange"
|
||||
/>
|
||||
|
||||
<view :class="['status-tag', item.status]">
|
||||
{{ getStatusText(item.status) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 合同列表 -->
|
||||
<scroll-view scroll-y class="scroll-content" @scrolltolower="loadMore" :refresher-enabled="true"
|
||||
:refresher-triggered="isRefreshing" @refresherrefresh="refresh">
|
||||
<view v-if="contracts.length > 0" class="contract-list">
|
||||
<view class="contract-card" v-for="item in contracts" :key="item.id" @click="goDetail(item)">
|
||||
<image class="contract-cover" :src="item.coverUrl || defaultCover" mode="aspectFill" />
|
||||
|
||||
<view class="contract-info">
|
||||
<view class="top-row">
|
||||
<text class="asset-name">{{ item.assetName }}</text>
|
||||
<u-icon name="arrow-right" size="28" color="#ccc" />
|
||||
</view>
|
||||
<view class="asset-room">{{ item.assetRoom || "—" }}</view>
|
||||
<view class="date-range">{{ item.startDate }} ~ {{ item.endDate }}</view>
|
||||
|
||||
<view :class="['status-tag', item.status]">
|
||||
{{ getStatusText(item.status) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-loadmore :status="loadStatus" />
|
||||
</view>
|
||||
|
||||
<view v-else class="empty">
|
||||
<u-empty mode="list" text="暂无合同记录" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<u-loadmore :status="loadStatus" />
|
||||
</view>
|
||||
|
||||
<view v-else class="empty">
|
||||
<u-empty mode="list" text="暂无合同记录" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabList: [
|
||||
{ name: '全部', value: 'all' },
|
||||
{ name: '待签署', value: 'pending' },
|
||||
{ name: '已签署', value: 'signed' },
|
||||
{ name: '已过期', value: 'expired' }
|
||||
],
|
||||
currentTab: 0,
|
||||
statusFilter: 'all',
|
||||
import DateFilter from '../../components/DatePicker/DateFilter.vue';
|
||||
export default {
|
||||
components: { DateFilter },
|
||||
data() {
|
||||
return {
|
||||
tabList: [{
|
||||
name: "全部",
|
||||
value: "all"
|
||||
},
|
||||
{
|
||||
name: "待签署",
|
||||
value: "pending"
|
||||
},
|
||||
{
|
||||
name: "已签署",
|
||||
value: "signed"
|
||||
},
|
||||
{
|
||||
name: "已过期",
|
||||
value: "expired"
|
||||
},
|
||||
],
|
||||
|
||||
contracts: [],
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
loadStatus: 'loadmore',
|
||||
isRefreshing: false,
|
||||
defaultCover: '/static/img/index/swiper/swiper3.jpg' // 可换成你的默认封面
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.loadContracts();
|
||||
},
|
||||
methods: {
|
||||
onTabChange(index) {
|
||||
this.currentTab = index;
|
||||
this.statusFilter = this.tabList[index].value;
|
||||
this.pageNo = 1;
|
||||
this.contracts = [];
|
||||
this.loadContracts();
|
||||
},
|
||||
currentTab: 0,
|
||||
statusFilter: "all",
|
||||
|
||||
loadContracts() {
|
||||
this.loadStatus = 'loading';
|
||||
setTimeout(() => {
|
||||
const allData = [
|
||||
{
|
||||
id: 1,
|
||||
assetName: '金辉大厦',
|
||||
assetRoom: '502',
|
||||
coverUrl: '/static/img/index/swiper/swiper3.jpg',
|
||||
status: 'pending',
|
||||
startDate: '2025-01-01',
|
||||
endDate: '2025-12-31'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
assetName: '东方广场',
|
||||
assetRoom: '',
|
||||
coverUrl: '/static/img/index/swiper/swiper3.jpg',
|
||||
status: 'signed',
|
||||
startDate: '2024-03-01',
|
||||
endDate: '2025-03-01'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
assetName: '海景公寓',
|
||||
assetRoom: 'A-1201',
|
||||
coverUrl: '/static/img/index/swiper/swiper3.jpg',
|
||||
status: 'expired',
|
||||
startDate: '2023-01-01',
|
||||
endDate: '2024-01-01'
|
||||
}
|
||||
];
|
||||
// --- 时间筛选 ---
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
// 可选：限制日期范围
|
||||
minDate: "2000-01-01",
|
||||
maxDate: "2099-12-31",
|
||||
contracts: [],
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
loadStatus: "loadmore",
|
||||
isRefreshing: false,
|
||||
defaultCover: "/static/img/index/swiper/swiper3.jpg",
|
||||
};
|
||||
},
|
||||
|
||||
const filtered =
|
||||
this.statusFilter === 'all'
|
||||
? allData
|
||||
: allData.filter(i => i.status === this.statusFilter);
|
||||
onLoad() {
|
||||
this.loadContracts(true);
|
||||
},
|
||||
|
||||
this.contracts = filtered;
|
||||
this.loadStatus = 'nomore';
|
||||
this.isRefreshing = false;
|
||||
}, 400);
|
||||
},
|
||||
methods: {
|
||||
onTabChange(index) {
|
||||
this.currentTab = index;
|
||||
this.statusFilter = this.tabList[index].value;
|
||||
this.resetAndLoad();
|
||||
},
|
||||
onDateFilterChange({ start, end }) {
|
||||
this.resetAndLoad();
|
||||
},
|
||||
|
||||
formatDate(time) {
|
||||
const d = new Date(time);
|
||||
const m = String(d.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(d.getDate()).padStart(2, "0");
|
||||
return `${d.getFullYear()}-${m}-${day}`;
|
||||
},
|
||||
|
||||
refresh() {
|
||||
this.isRefreshing = true;
|
||||
this.pageNo = 1;
|
||||
this.loadContracts();
|
||||
},
|
||||
resetAndLoad() {
|
||||
this.pageNo = 1;
|
||||
this.contracts = [];
|
||||
this.loadStatus = "loading";
|
||||
this.loadContracts(true);
|
||||
},
|
||||
|
||||
loadMore() {
|
||||
if (this.loadStatus === 'nomore') return;
|
||||
this.pageNo++;
|
||||
this.loadContracts();
|
||||
},
|
||||
/** 你的 loadContracts() 保持不变，只需加：按时间筛选 */
|
||||
loadContracts(isInit = false) {
|
||||
this.loadStatus = "loading";
|
||||
|
||||
goDetail(item) {
|
||||
console.log('跳转合同详情页')
|
||||
uni.navigateTo({
|
||||
url: `/pages/detail/contractDetail?id=${item.id}`
|
||||
});
|
||||
},
|
||||
setTimeout(() => {
|
||||
let mockAll = [{
|
||||
id: 1,
|
||||
assetName: '金辉大厦',
|
||||
assetRoom: '502',
|
||||
coverUrl: '',
|
||||
status: 'pending',
|
||||
startDate: '2025-01-01',
|
||||
endDate: '2025-12-31'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
assetName: '东方广场',
|
||||
assetRoom: '',
|
||||
status: 'signed',
|
||||
startDate: '2024-03-01',
|
||||
endDate: '2025-03-01'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
assetName: '海景公寓',
|
||||
assetRoom: 'A-1201',
|
||||
status: 'expired',
|
||||
startDate: '2023-01-01',
|
||||
endDate: '2024-01-01'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
assetName: '富力中心',
|
||||
assetRoom: '1699',
|
||||
status: 'pending',
|
||||
startDate: '2024-10-01',
|
||||
endDate: '2025-10-01'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
assetName: '财富大厦',
|
||||
assetRoom: '2308',
|
||||
status: 'signed',
|
||||
startDate: '2023-06-01',
|
||||
endDate: '2024-06-01'
|
||||
}
|
||||
];
|
||||
|
||||
getStatusText(status) {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return '待签署';
|
||||
case 'signed':
|
||||
return '已签署';
|
||||
case 'expired':
|
||||
return '已过期';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// 状态过滤
|
||||
if (this.statusFilter !== "all") {
|
||||
mockAll = mockAll.filter(i => i.status === this.statusFilter);
|
||||
}
|
||||
|
||||
// 时间过滤
|
||||
if (this.startDate) mockAll = mockAll.filter(i => i.startDate >= this.startDate);
|
||||
if (this.endDate) mockAll = mockAll.filter(i => i.endDate <= this.endDate);
|
||||
|
||||
// 分页
|
||||
this.total = mockAll.length;
|
||||
const start = (this.pageNo - 1) * this.pageSize;
|
||||
const pageList = mockAll.slice(start, start + this.pageSize);
|
||||
|
||||
if (this.pageNo === 1) {
|
||||
this.contracts = pageList;
|
||||
} else {
|
||||
this.contracts = [...this.contracts, ...pageList];
|
||||
}
|
||||
|
||||
this.loadStatus = this.contracts.length >= this.total ? "nomore" : "loadmore";
|
||||
this.isRefreshing = false;
|
||||
}, 400);
|
||||
},
|
||||
|
||||
refresh() {
|
||||
this.isRefreshing = true;
|
||||
this.resetAndLoad();
|
||||
},
|
||||
|
||||
loadMore() {
|
||||
if (this.loadStatus !== "loadmore") return;
|
||||
this.pageNo++;
|
||||
this.loadContracts();
|
||||
},
|
||||
|
||||
goDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/detail/contractDetail?id=${item.id}`,
|
||||
});
|
||||
},
|
||||
|
||||
getStatusText(status) {
|
||||
switch (status) {
|
||||
case "pending":
|
||||
return "待签署";
|
||||
case "signed":
|
||||
return "已签署";
|
||||
case "expired":
|
||||
return "已过期";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contract-page {
|
||||
background-color: #f8f8f8;
|
||||
padding-top: 175rpx; /* 给导航栏留空间 */
|
||||
min-height: 100vh;
|
||||
}
|
||||
.contract-page {
|
||||
background-color: #f8f8f8;
|
||||
padding-top: 175rpx;
|
||||
/* 给导航栏留空间 */
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
height: calc(100vh - 100rpx);
|
||||
}
|
||||
.scroll-content {
|
||||
height: calc(100vh - 100rpx);
|
||||
}
|
||||
|
||||
.contract-list {
|
||||
padding: 20rpx;
|
||||
}
|
||||
.contract-list {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.contract-card {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
}
|
||||
.contract-card {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contract-cover {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.contract-cover {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contract-info {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
.contract-info {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.asset-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.top-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.asset-room {
|
||||
font-size: 26rpx;
|
||||
color: #555;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.asset-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.date-range {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.asset-room {
|
||||
font-size: 26rpx;
|
||||
color: #555;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 0rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 24rpx;
|
||||
.date-range {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
background: #fff8e1;
|
||||
color: #ff9800;
|
||||
}
|
||||
&.signed {
|
||||
background: #e8f5e9;
|
||||
color: #4caf50;
|
||||
}
|
||||
&.expired {
|
||||
background: #fbe9e7;
|
||||
color: #e53935;
|
||||
}
|
||||
}
|
||||
.status-tag {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 0rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.empty {
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
</style>
|
||||
&.pending {
|
||||
background: #fff8e1;
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
&.signed {
|
||||
background: #e8f5e9;
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
&.expired {
|
||||
background: #fbe9e7;
|
||||
color: #e53935;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
|
||||
.tab-wrapper {
|
||||
background-color: #ffffff;
|
||||
padding: 10rpx 0;
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.06);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user