<template>
<view class="center">
<view class="function">
<text class="title">常用功能</text>
<view class="functionBox">
<button open-type="contact" class="service">
<uni-icons font-family="Service" class="family" :size="19" color="#f11"></uni-icons>
<text class="serviceText">平台客服</text>
</button>
<view class="service" @click="address()">
<uni-icons type="location" size="24" color="#f44"></uni-icons>
<text class="serviceText">我的地址</text>
</view>
<navigator url="/pages/my/myScore" class="service">
<uni-icons type="star" size="24" color="#f44"></uni-icons>
<text class="serviceText">我的评价</text>
</navigator>
<navigator url="/pages/my/Chat" class="service">
<uni-icons type="chat" size="24" color="#f44"></uni-icons>
<text class="serviceText">消息中心</text>
</navigator>
</view>
</view>
<view class="other_function">
<text class="title">其他功能</text>
<view class="functionBox">
<button open-type="contact" class="service">
<uni-icons type="shop" size="24" color="#f44"></uni-icons>
<text class="serviceText">邀请朋友</text>
</button>
<button open-type="contact" class="service">
<uni-icons type="shop" size="24" color="#f44"></uni-icons>
<text class="serviceText">成为摊主</text>
</button>
<button open-type="contact" class="service">
<uni-icons font-family="Comperate" :size="24" color="#f44"></uni-icons>
<text class="serviceText">商务合作</text>
</button>
<navigator url="/pages/my/Feedback" class="service">
<uni-icons type="compose" size="24" color="#f44"></uni-icons>
<text class="serviceText">意见反馈</text>
</navigator>
</view>
</view>
</view>
</template>
<script setup>
function address(){
uni.navigateTo({
url:'/pages/my/addressPage/addressPage'
})
}
</script>
<style scoped lang="scss">
@font-face {
font-family: Service;
src: url('/static/Service.ttf') format('truetype');
}
@font-face {
font-family: Comperate;
src: url('/static/comperate.ttf') format('truetype');
}
.center{
.function,.other_function{
display: flex;
flex-direction: column;
justify-content: flex-start;
background-color: #fff;
border-radius: 30rpx;
margin: 20rpx;
.title{
padding-left: 30rpx;
padding-top: 20rpx;
font-size: 28rpx;
}
.functionBox{
margin: 20rpx;
padding-bottom: 10rpx;
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 30rpx;
.service{
all: unset; / 重置所有样式 /
display: inline-flex; / 重新设置显示属性 /
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.family{
padding: 5rpx;
}
.serviceText{
font-size: 22rpx;
}
}
}
}
.other_function{
margin-top: 40rpx;
}
}
</style>
0 个回复