163 lines
4.7 KiB
Vue
163 lines
4.7 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 导航 -->
|
|
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
|
|
<!-- 自定义导航 -->
|
|
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">
|
|
<view @click="returnnav" style="padding-top: 14rpx">
|
|
<u-icon name="arrow-left" color="#000" size="26"></u-icon>
|
|
</view>
|
|
<view style="margin: 0 auto">大宗师</view>
|
|
</view>
|
|
</view>
|
|
<!-- 滚动通知 -->
|
|
<view class="notice">
|
|
<u-notice-bar :text="text1"></u-notice-bar>
|
|
</view>
|
|
<!-- 主体部分 -->
|
|
<scroll-view scroll-y="true" class="centre">
|
|
<view class="category">
|
|
<view class="box" v-for="item in 4">
|
|
<view class="up">
|
|
<view class="up-left">
|
|
<u-avatar src="" shape="circle" size="60"></u-avatar>
|
|
</view>
|
|
<view class="up-centre">
|
|
<view style="margin-left: 45rpx">大地皇者</view>
|
|
<view style="display: flex">
|
|
<view style="font-size: 16rpx; color: #afafaf; width: 100rpx">本月：</view>
|
|
<view class="quadrangle">
|
|
<view class="text">近20中17</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<span style="font-size: 16rpx; color: #afafaf">本月重心：</span>
|
|
<span style="font-size: 16rpx; color: #afafaf">20</span>
|
|
<span style="font-size: 16rpx; color: #afafaf">分</span>
|
|
</view>
|
|
</view>
|
|
<view class="up-right">
|
|
<view style="margin-left: 5rpx">
|
|
<u-icon name="heart" color="#e1e1e1" size="20"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="centre">
|
|
<view class="centre-text">评价：大宗师</view>
|
|
<view class="centre-text">行走江湖多年，关系网遍布全球</view>
|
|
<view class="centre-text">评价：大宗师</view>
|
|
<view class="centre-price">
|
|
<span>价格：</span>
|
|
<span>888.00奖门令</span>
|
|
</view>
|
|
</view>
|
|
<view class="below">
|
|
<view>高手介绍：</view>
|
|
<view class="text">奖门人鬼画符韩国打算卡夫卡撒法斯科防守上的开始啦的库萨克达</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { safeAreaInsets } = uni.getSystemInfoSync();
|
|
import { ref } from 'vue';
|
|
|
|
// 创建响应式数据
|
|
const text1 = ref('众多组件覆盖开发过程的各个需求,1组件功能丰富多端兼容让您快速集成开箱即用');
|
|
const returnnav = () => {
|
|
uni.navigateBack();
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page-navbar {
|
|
display: flex;
|
|
}
|
|
.notice {
|
|
height: 30rpx;
|
|
}
|
|
.centre {
|
|
width: 100%;
|
|
margin-top: 20rpx;
|
|
|
|
.category {
|
|
width: 92%;
|
|
padding: 20rpx 3%;
|
|
|
|
.box {
|
|
width: 90vw;
|
|
height: 42vh;
|
|
border-top: 1rpx solid #f4f4f4;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
.up {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-end;
|
|
.up-left {
|
|
margin-top: 30rpx;
|
|
margin-left: 40rpx;
|
|
}
|
|
.up-centre {
|
|
margin-top: 20rpx;
|
|
margin-left: 20rpx;
|
|
.quadrangle {
|
|
font-size: 16rpx;
|
|
line-height: 30rpx;
|
|
width: 80%;
|
|
height: 30rpx;
|
|
background-color: #f00; /* 任意颜色 */
|
|
transform: skewX(-25deg); /* 调整倾斜角度以改变形状 */
|
|
.text {
|
|
transform: skewX(25deg); /* 调整倾斜角度以改变形状 */
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.up-right {
|
|
margin-left: 100px;
|
|
margin-bottom: 80rpx;
|
|
margin-top: 20rpx;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
.centre {
|
|
.centre-text {
|
|
display: inline-block;
|
|
border: 1rpx solid #e5b47e;
|
|
color: #e8b596;
|
|
border-radius: 15rpx;
|
|
padding: 12rpx;
|
|
margin-left: 20rpx;
|
|
margin-top: 12rpx;
|
|
margin-bottom: 12rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
.centre-price {
|
|
margin: 20rpx;
|
|
color: #e5b47e;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.below {
|
|
font-size: 24rpx;
|
|
margin-left: 20rpx;
|
|
width: 500rpx;
|
|
.text {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|