dykj-football/pages/index/compontents/masterHand.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="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>