球星卡微信小程序
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.
 
 
 
 

594 lines
14 KiB

<template>
<view class="flex-col page">
<lf-header :spreadOut="true" :diy="true" :boderBottom="true" bgColor="#ffffff">
<view class="header-nav">
<image class="searchIcon" src="../../static/搜索.png" @click="$url('/pages/ratingQuery/ratingQuery')"></image>
<text class="title">评级中心</text>
</view>
</lf-header>
<view class="flex-col items-center group_3">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497755645259901.png"
class="image_6" />
<view class="flex-col section_2">
<view class="flex-col">
<!-- 用户信息 -->
<view class="flex-col section_3" @click="$url('/pages/settings/settings')">
<view class="bottom-group flex-col items-center view_3">
<view class="flex-col items-end image-wrapper">
<image
src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497944681815904.png"
class="image_7" />
</view>
<view class="flex-col items-center badge">
<text>99+</text>
</view>
</view>
<view class="justify-center group_5">
<text>*</text>
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497755447138115.png"
class="image_8" />
</view>
</view>
<!-- 我的订单 -->
<view class="section_4 flex-col">
<view class="justify-between">
<text class="text_4">我的订单</text>
<view class="right-group flex-row" @click="$url('/pages/order/order')">
<text>全部</text>
<image
src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497893779891395.png"
class="image_8" />
</view>
</view>
<view class="justify-between equal-division" @click="$url('/pages/order/order')">
<view class="equal-division-item flex-col" >
<view class="top-group flex-col items-center">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497746086268452.png"
class="image_11" />
<view class="flex-col items-center badge_1">
<text>2</text>
</view>
</view>
<text class="text_7">待确认</text>
</view>
<view class="flex-col items-center equal-division-item_1">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497746226999392.png"
class="image_11" />
<text class="text_9">评级中</text>
</view>
<view class="flex-col items-center equal-division-item_2">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497746138565873.png"
class="image_11" />
<text class="text_11">待付款</text>
</view>
<view class="equal-division-item flex-col">
<view class="top-group flex-col items-center">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497746181954101.png"
class="image_11" />
<view class="flex-col items-center badge_2">
<text>1</text>
</view>
</view>
<text class="text_7">待收货</text>
</view>
</view>
</view>
<!-- 快速评级 -->
<view class="section_4 flex-col">
<view class="justify-between group_9">
<view class="group_10">
<text class="text_14">快速评级</text>
<text class="text_15">7day</text>
</view>
<view class="right-group flex-row" @click="$url('/pages/fastRating/fastRating')">
<text>查看详情</text>
<image
src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497893779891395.png"
class="image_8" />
</view>
</view>
<view class="grid">
<view class="flex-col items-center grid-item">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497754868753243.png"
class="image_17" />
<text class="text_17">全面评级</text>
</view>
<view class="flex-col items-center grid-item_1">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497754706422513.png"
class="image_17" />
<text class="text_9">卡品评级</text>
</view>
<view class="grid-item_2 flex-col items-center">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497754475187308.png"
class="image_17" />
<text class="text_19">签名评级</text>
</view>
<view class="grid-item_2 flex-col items-center">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497754361023096.png"
class="image_17" />
<text class="text_19">套壳服务</text>
</view>
</view>
<view class="flex-col group_11">
<view class="justify-between group_12">
<view class="flex-row">
<view class="section_7"> </view>
<view class="group_14">
<text class="text_22">阅读并同意</text>
<text class="text_23">相关协议</text>
</view>
</view>
<text class="text_24">45/</text>
</view>
<view class="flex-col items-center button" @click="$url('/pages/write/baseInfo')">
<text>下一步</text>
</view>
</view>
</view>
<!-- 已评卡 -->
<view class="flex-col section_8">
<view class="justify-between group_15" @click="$url('/pages/order/order')">
<text>已评卡</text>
<image
src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497893779891395.png"
class="image_8" />
</view>
<view class="flex-row equal-division_1">
<view class="flex-col items-center equal-division-item_3" @click="$url('/packages/sonpingDetail/sonpingDetail')">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497759043659561.png"
class="image_23" />
<text class="text_27">2021chronic</text>
</view>
<view class="flex-col items-center equal-division-item_4" @click="$url('/packages/sonpingDetail/sonpingDetail')">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497759141393132.png"
class="image_23" />
<text class="text_28">2021chronic</text>
</view>
<view class="flex-col items-center equal-division-item_5" @click="$url('/packages/sonpingDetail/sonpingDetail')">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497759203410969.png"
class="image_23" />
<text class="text_29">2021chronic</text>
</view>
</view>
</view>
<!-- 评级标准 -->
<view class="justify-between section_9" @click="$url('/pages/ratingCriteria/ratingCriteria')">
<text>评级标准/卡砖设计</text>
<image
src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497893779891395.png"
class="image_8" />
</view>
</view>
<view class="section_10"> </view>
</view>
</view>
</view>
</template>
<script>
import lfHeader from '@/components/lf-header.vue'
export default {
components: {
lfHeader
},
data() {
return {};
},
};
</script>
<style scoped lang="scss">
.header-nav{
text-align: center;
position: relative;
width: 720rpx;
display: flex;
justify-content: center;
.searchIcon{
position: absolute;
left: 0;
top: 6rpx;
width: 38rpx;
height: 36rpx;
}
}
.bottom-group {
position: relative;
}
.section_4 {
margin-top: 30rpx;
padding: 40rpx 32rpx;
background-color: rgb(255, 255, 255);
}
.image_8 {
width: 44rpx;
height: 44rpx;
}
.equal-division-item {
width: 84rpx;
}
.grid-item_2 {
color: rgb(51, 51, 51);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
padding: 28rpx 0 24rpx;
border-radius: 10rpx;
border: solid 2rpx rgb(195, 195, 195);
}
.top-group {
color: rgb(255, 255, 255);
font-size: 24rpx;
font-weight: 500;
line-height: 26rpx;
white-space: nowrap;
padding-top: 2rpx;
position: relative;
}
.image_11 {
width: 60rpx;
height: 60rpx;
}
.image_17 {
width: 50rpx;
height: 50rpx;
}
.image_23 {
border-radius: 10rpx;
width: 200rpx;
height: 240rpx;
}
.right-group {
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_7 {
margin-top: 12rpx;
color: rgb(85, 85, 85);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_9 {
margin-top: 14rpx;
}
.text_19 {
margin-top: 14rpx;
}
.page {
background-color: #f6f6f6;
width: 100%;
overflow-y: auto;
height: 100%;
}
.group_3 {
padding-bottom: 2024rpx;
flex: 1 1 auto;
overflow-y: auto;
position: relative;
}
.image_6 {
width: 100vw;
height: 1vw;
}
.section_2 {
padding-bottom: 14rpx;
background-color: rgb(246, 246, 246);
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
}
.section_10 {
margin-top: 84rpx;
align-self: center;
background-color: rgb(0, 0, 0);
border-radius: 4rpx;
width: 196rpx;
height: 8rpx;
}
.section_3 {
padding: 40rpx 0 38rpx;
background-color: rgb(255, 255, 255);
}
.section_8 {
margin-top: 30rpx;
padding: 40rpx 0;
background-color: rgb(255, 255, 255);
}
.section_9 {
margin-top: 30rpx;
padding: 40rpx 32rpx 30rpx;
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 700;
line-height: 44rpx;
white-space: nowrap;
background-color: rgb(255, 255, 255);
}
.view_3 {
color: rgb(255, 255, 255);
font-size: 24rpx;
font-weight: 500;
line-height: 34rpx;
white-space: nowrap;
}
.group_5 {
margin-top: 20rpx;
color: rgb(51, 51, 51);
font-size: 34rpx;
font-weight: 600;
line-height: 48rpx;
white-space: nowrap;
}
.equal-division {
margin: 36rpx 28rpx 0;
}
.group_9 {
padding-left: 2rpx;
}
.grid {
margin-top: 40rpx;
height: 340rpx;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 22rpx;
grid-column-gap: 24rpx;
}
.group_11 {
margin-top: 40rpx;
}
.group_15 {
padding: 0 32rpx;
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 700;
line-height: 44rpx;
white-space: nowrap;
}
.equal-division_1 {
margin-top: 40rpx;
padding: 0 8rpx;
color: rgb(51, 51, 51);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.image-wrapper {
padding-top: 72rpx;
background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497753952125194.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 112rpx;
}
.badge {
background-color: rgb(234, 43, 43);
border-radius: 17rpx;
width: 64rpx;
position: absolute;
right: 284rpx;
top: 0;
}
.text_4 {
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 700;
line-height: 44rpx;
white-space: nowrap;
}
.equal-division-item_1 {
color: rgb(85, 85, 85);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.equal-division-item_2 {
padding-top: 2rpx;
color: rgb(85, 85, 85);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.group_10 {
white-space: nowrap;
height: 44rpx;
}
.grid-item {
padding: 22rpx 0 30rpx;
color: rgb(231, 162, 63);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
border-radius: 10rpx;
border: solid 2rpx rgb(231, 162, 63);
}
.grid-item_1 {
padding: 22rpx 0 30rpx;
color: rgb(51, 51, 51);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
border-radius: 10rpx;
border: solid 2rpx rgb(195, 195, 195);
}
.group_12 {
padding-bottom: 20rpx;
}
.button {
padding: 26rpx 0;
color: rgb(255, 255, 255);
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
white-space: nowrap;
background-color: rgb(231, 162, 63);
border-radius: 10rpx;
}
.equal-division-item_3 {
flex: 1 1 244rpx;
}
.equal-division-item_4 {
flex: 1 1 244rpx;
}
.equal-division-item_5 {
flex: 1 1 244rpx;
}
.image_7 {
margin-right: 12rpx;
border-radius: 50%;
width: 40rpx;
height: 40rpx;
}
.text_11 {
margin-top: 12rpx;
}
.text_14 {
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 700;
line-height: 44rpx;
}
.text_15 {
color: rgb(119, 119, 119);
font-size: 24rpx;
font-weight: 500;
line-height: 34rpx;
}
.text_17 {
margin-top: 14rpx;
}
.text_24 {
color: rgb(119, 119, 119);
font-size: 28rpx;
line-height: 40rpx;
white-space: nowrap;
}
.text_27 {
margin-top: 10rpx;
}
.text_28 {
margin-top: 10rpx;
}
.text_29 {
margin-top: 10rpx;
}
.badge_1 {
background-color: rgb(234, 43, 43);
border-radius: 13rpx;
width: 26rpx;
position: absolute;
right: 6rpx;
top: 0;
}
.badge_2 {
background-color: rgb(234, 43, 43);
border-radius: 13rpx;
width: 26rpx;
position: absolute;
right: 0;
top: 0;
}
.section_7 {
border-radius: 50%;
width: 40rpx;
height: 40rpx;
border: solid 2rpx rgb(195, 195, 195);
}
.group_14 {
margin-left: 14rpx;
white-space: nowrap;
height: 40rpx;
}
.text_22 {
color: rgb(119, 119, 119);
font-size: 28rpx;
line-height: 40rpx;
}
.text_23 {
color: rgb(209, 161, 28);
font-size: 28rpx;
line-height: 40rpx;
}
</style>