解决代码冲突
This commit is contained in:
ycy
commit
f16f49be04
14
pages.json
14
pages.json
|
|
@ -76,6 +76,20 @@
|
|||
"navigationBarTitleText": "VIP",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/compontents/bigMaster",
|
||||
"style": {
|
||||
"navigationBarTitleText": "大宗师",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/compontents/masterHand",
|
||||
"style": {
|
||||
"navigationBarTitleText": "高手详情",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
162
pages/index/compontents/bigMaster.vue
Normal file
162
pages/index/compontents/bigMaster.vue
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<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>
|
||||
334
pages/index/compontents/masterHand.vue
Normal file
334
pages/index/compontents/masterHand.vue
Normal file
|
|
@ -0,0 +1,334 @@
|
|||
<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="record">
|
||||
<view class="record-up">
|
||||
<view class="up">
|
||||
<view class="head"><u-avatar :src="src" size="45"></u-avatar></view>
|
||||
<view class="text">法无边</view>
|
||||
<view class="tag">
|
||||
历史胜率:
|
||||
<span>75%</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="centre">本月得分:{{ score }}</view>
|
||||
<view class="below">擅长联赛：法国各级联赛</view>
|
||||
</view>
|
||||
<view class="record-centre">
|
||||
<view class="up">高手简介</view>
|
||||
<view class="below">大宗师花甲王五大得以门生之一，专攻法国版块</view>
|
||||
</view>
|
||||
<view class="record-below">
|
||||
<view class="up">近20场战绩</view>
|
||||
<view class="centre">
|
||||
<view v-for="(item, index) in record" style="display: inline-block">
|
||||
<u-tag v-if="item.value === 2" text="走" size="large"></u-tag>
|
||||
<u-tag v-if="item.value === 1" text="错" type="success" size="large"></u-tag>
|
||||
<u-tag v-if="item.value === 0" text="中" type="error" size="large"></u-tag>
|
||||
</view>
|
||||
<!-- <view style="padding: 2rpx; border: 0.5rpx solid #5ac725; display: inline-block">
|
||||
<u-tag text="错" type="success" size="large"></u-tag>
|
||||
</view>
|
||||
<view style="padding: 2rpx; border: 0.5rpx solid #f56c6c; display: inline-block">
|
||||
<u-tag text="中" type="error" size="large"></u-tag>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="below">
|
||||
<u-button @click="attention" v-if="onswitch" style="border-radius: 35rpx" type="primary" text="关注" color="#e8b596"></u-button>
|
||||
<u-button @click="cancel" v-else style="border-radius: 35rpx; color: #000" type="primary" text="取消关注" color="#dddddd"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 最新方案 -->
|
||||
<view class="newest">
|
||||
<view class="newest-up">最新方案</view>
|
||||
<view class="newest-below">
|
||||
<view class="one">
|
||||
<view class="one-left">
|
||||
<span>¥</span>
|
||||
<span>688</span>
|
||||
<span>未购买</span>
|
||||
</view>
|
||||
<view class="one-right">
|
||||
<u-button style="border-radius: 50rpx; width: 150rpx; height: 60rpx" color="#e8b596" type="primary" text="立即购买"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tow">今天继续特殊玩法！</view>
|
||||
<view class="three">
|
||||
<view class="three-up">
|
||||
<view>2004-04-12 03:00:00</view>
|
||||
<view>欧足联赛洲联赛</view>
|
||||
</view>
|
||||
<view class="three-below">
|
||||
<view class="em">
|
||||
<u-avatar :src="src"></u-avatar>
|
||||
<em>靌菲加</em>
|
||||
</view>
|
||||
<view>vs</view>
|
||||
<view class="em">
|
||||
<u-avatar :src="src"></u-avatar>
|
||||
<em>馬赛</em>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="four">
|
||||
<view class="four-left">3小时前</view>
|
||||
<view class="four-right">25人订阅</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 历史记录 -->
|
||||
<view class="history">
|
||||
<view class="history-up">历史记录</view>
|
||||
<view class="history-below">
|
||||
<view class="tow">今天继续特殊玩法！</view>
|
||||
<view class="three">
|
||||
<view class="three-up">
|
||||
<view>2004-04-12 03:00:00</view>
|
||||
<view>欧足联赛洲联赛</view>
|
||||
</view>
|
||||
<view class="three-below">
|
||||
<view class="em">
|
||||
<u-avatar :src="src"></u-avatar>
|
||||
<em>靌菲加</em>
|
||||
</view>
|
||||
<view>vs</view>
|
||||
<view class="em">
|
||||
<u-avatar :src="src"></u-avatar>
|
||||
<em>馬赛</em>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="four">
|
||||
<view class="four-left">3小时前 已结算</view>
|
||||
<view class="four-right">25人订阅</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync();
|
||||
const returnnav = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
const onswitch = ref(true);
|
||||
const score = ref(25);
|
||||
const record = ref([
|
||||
{
|
||||
laede: '中',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
laede: '中',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
laede: '错',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
laede: '走',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
laede: '走',
|
||||
value: 2
|
||||
}
|
||||
]);
|
||||
const attention = () => {
|
||||
onswitch.value = !onswitch.value;
|
||||
};
|
||||
const cancel = () => {
|
||||
onswitch.value = !onswitch.value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page-navbar {
|
||||
display: flex;
|
||||
}
|
||||
.record {
|
||||
margin: 20rpx auto 0;
|
||||
height: 1000rpx;
|
||||
width: 90%;
|
||||
border: 1rpx solid #000;
|
||||
.record-up {
|
||||
height: 30%;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1rpx solid #000;
|
||||
.up {
|
||||
display: flex;
|
||||
.head {
|
||||
margin-top: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.text {
|
||||
margin-top: 60rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tag {
|
||||
margin-top: 60rpx;
|
||||
margin-left: 140rpx;
|
||||
}
|
||||
}
|
||||
.centre {
|
||||
display: inline-block;
|
||||
color: red;
|
||||
border: 1rpx solid #e5b895;
|
||||
padding: 12rpx 5rpx 10rpx;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.below {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
.record-centre {
|
||||
height: 20%;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1rpx solid #000;
|
||||
.up {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.below {
|
||||
font-size: 26rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
.record-below {
|
||||
height: 50%;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
.centre {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.centre ::v-deep .u-tag {
|
||||
height: 80rpx;
|
||||
}
|
||||
.below {
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.newest {
|
||||
width: 90%;
|
||||
margin: 15rpx auto;
|
||||
.newest-up {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
.newest-below {
|
||||
height: 100%;
|
||||
border: 1rpx solid #000;
|
||||
.one {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1rpx solid #000;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
.one-left {
|
||||
margin: 24rpx;
|
||||
}
|
||||
.one-right {
|
||||
margin: 24rpx;
|
||||
}
|
||||
}
|
||||
.tow {
|
||||
border-bottom: 1rpx solid #000;
|
||||
width: 90%;
|
||||
height: 80rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.three {
|
||||
border-bottom: 1rpx solid #000;
|
||||
width: 90%;
|
||||
height: 150rpx;
|
||||
margin: 0 auto;
|
||||
.three-up {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.three-below {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
.em {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.four {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 90%;
|
||||
height: 60rpx;
|
||||
margin: 20rpx auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.history {
|
||||
width: 90%;
|
||||
margin: 15rpx auto;
|
||||
.history-up {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
.history-below {
|
||||
height: 100%;
|
||||
border: 1rpx solid #000;
|
||||
.tow {
|
||||
border-bottom: 1rpx solid #000;
|
||||
width: 90%;
|
||||
height: 80rpx;
|
||||
margin: 25rpx auto 0;
|
||||
}
|
||||
.three {
|
||||
border-bottom: 1rpx solid #000;
|
||||
width: 90%;
|
||||
height: 150rpx;
|
||||
margin: 0 auto;
|
||||
.three-up {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.three-below {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
.em {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.four {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 90%;
|
||||
height: 60rpx;
|
||||
margin: 20rpx auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -51,13 +51,13 @@
|
|||
<view class="top">
|
||||
<view class="left" style="font-weight: 700; font-size: 34rpx">推荐高手</view>
|
||||
<view class="right">
|
||||
<view style="font-size: 24rpx; margin-right: 15rpx">查看更多</view>
|
||||
<view @click="ViewGuru" style="font-size: 24rpx; margin-right: 15rpx">查看更多</view>
|
||||
<u-icon name="arrow-right" size="12" color="#555555"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 900rpx; overflow-y: auto; -webkit-overflow-scrolling: touch">
|
||||
<view v-for="(item, index) in 5" class="Master-card-buttom">
|
||||
<view @click="masterHand(item)" v-for="(item, index) in 5" class="Master-card-buttom">
|
||||
<view class="left">
|
||||
<u-avatar src=""></u-avatar>
|
||||
<view class="">人名</view>
|
||||
|
|
@ -97,6 +97,18 @@ const src = ref({
|
|||
src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
|
||||
text: '无头像'
|
||||
});
|
||||
const ViewGuru = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/compontents/bigMaster',
|
||||
animationDuration: '300'
|
||||
});
|
||||
};
|
||||
const masterHand = (item) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/compontents/masterHand',
|
||||
animationDuration: '300'
|
||||
});
|
||||
};
|
||||
// #ifdef H5 || APP
|
||||
console.log('运行在 App');
|
||||
// #endif
|
||||
|
|
|
|||
|
|
@ -68,6 +68,10 @@
|
|||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 拟态框 -->
|
||||
<view>
|
||||
<u-modal @confirm="confirm" :show="show" :content="content"></u-modal>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -75,6 +79,8 @@
|
|||
import { ref, reactive } from 'vue';
|
||||
// 获取安全区域的边界
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync();
|
||||
const show = ref(true);
|
||||
const content = ref('uview-plus的目标是成为uni-app生态最优秀的UI框架');
|
||||
const categoryList = reactive([
|
||||
{
|
||||
id: 1,
|
||||
|
|
@ -116,6 +122,9 @@ const showCategory = (index) => {
|
|||
const toCategory = (box) => {
|
||||
console.log(box);
|
||||
};
|
||||
const confirm = () => {
|
||||
show.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user