SFH5/pagesb/videoTutorial/index.vue

<template>
  <view
    class="container"
    :class="[`${themeInfo.theme}-theme`, `${themeInfo.language}`]"
  >
    <navBar />
    <view class="content">
      <view class="info">
        <view class="i-header">
          <view class="tabbox">
            <view
              class="li"
            >
              {{ $t("person.VideoTutorial") }}
            </view>
          </view>
        </view>
        <view class="infobox">
          <channel-video v-for="(item,key) in  state.videoList" style="margin-bottom: 20rpx;width: 100%;" :autoplay="false"	:feed-id="item.url"></channel-video>
        </view>
      </view>
    </view>
    <!-- 是否验证成功 -->
  </view>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { baseImageUrl } from "@/config/index.js";
import navBar from "@/components/navBar.vue";
// 主题色配置
import { useMainStore } from "@/store/index.js";
const { themeInfo, storeState } = useMainStore();
import { useI18n } from 'vue-i18n';
import { useOrderApi } from "@/Apis/order.js";
const { t } = useI18n();
const app = getApp();
const pages = getCurrentPages()
const getApi = useOrderApi();

const state = reactive({
  showAuthModal: false,
  showCrop:false,
  contentTips:'', // 验证成功提示
  videoList:[
    {
      url:"export/UzFfAgtgekIEAQAAAAAAwxcL-YgO4gAAAAstQy6ubaLX4KHWvLEZgBPEoqFMDCIJUb-CzNPgMJqYQIoIU-7mo8lwd-RKQBd2"
    },
    {
      url:"export/UzFfAgtgekIEAQAAAAAAJSE1Y85VmwAAAAstQy6ubaLX4KHWvLEZgBPEsqEUCwNaUb-CzNPgMJrY-yH71hZ94sDGGm7ABVhw"
    },
    {
      url:"export/UzFfAgtgekIEAQAAAAAAp64XjNX9IQAAAAstQy6ubaLX4KHWvLEZgBPE0KAsAmF0c7-CzNPgMJqnwlki2qEI_zgVrEW_jwHI"
    },
    {
      url:"export/UzFfAgtgekIEAQAAAAAARGYuhrIF2QAAAAstQy6ubaLX4KHWvLEZgBPEiqEkLkxlc7-CzNPgMJoX-jjwuklleftys2R8Fw5w"
    },
    
    {
      url:"export/UzFfAgtgekIEAQAAAAAAiosCDGxJlQAAAAstQy6ubaLX4KHWvLEZgBPEp6FMXTUAcr-CzNPgMJrTttolxOzYhM7UTEA74nGQ"
    },
    {
      url:"export/UzFfAgtgekIEAQAAAAAAxd0vSWv-zgAAAAstQy6ubaLX4KHWvLEZgBPEraE4LTYdcr-CzNPgMJqC4e7v_huNPmMjevUlmkOp"
    },
    {
      url:"export/UzFfAgtgekIEAQAAAAAAG1EOKbk80wAAAAstQy6ubaLX4KHWvLEZgBPEvqEEUWEKcr-CzNPgMJqBmCIwAhVm-YPrEF2Ywev-"
    },
    {
      url:"export/UzFfAgtgekIEAQAAAAAA8QMVbCy4FgAAAAstQy6ubaLX4KHWvLEZgBPEoKE8WwIER9aBzNPgMJp-NLi-G2Lbg1m1qeWlshbC"
    },

  ],
});

onLoad((event) => {
});
</script>
<style lang="scss" scoped>
@import "@/static/style/theme.scss";

.container {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  padding-bottom: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(
    to bottom,
    var(--right-linear),
    var(--left-linear2)
  );
  background-attachment: fixed;
  .qf-image-cropper {
	  z-index: 10;
  }
  .content {
    width: 100%;
    .infobox {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      position: relative;
			&::before {
        content: "";
        z-index: 9;
        position: absolute;
        bottom: -7px;
        left: 0;
        width: 100%;
        height: 14px;
        background: radial-gradient(var(--left-linear2) 0px, var(--left-linear2) 5px, transparent 5px, transparent);
        background-size: 14px 14px;
      }
    }
    .btn {
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      padding:0 20rpx;
      button {
        font-size: 28rpx;
        padding: 12rpx 0;
        font-size: 30rpx;
        font-weight: bold;
        color: var(--text-color);
        background: var(--active-color);
        border-radius: 10rpx;
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.13);
      }
    }
    .select {
      border-bottom: 1px dashed #d8d8d857;
      margin-bottom: 16rpx;
      .label {
        color: #bec2ce;
        font-size: 26rpx;
      }
      .info {
        color: #242e42;
        font-size: 22rpx;
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        padding: 0 18rpx;
        opacity: 0.7;
        &.Total {
          margin-top: 10rpx;
          color: #242e42;
          opacity: 1;
        }
      }
      .garyBox {
        background-color: rgba(216, 216, 216, 0.3);
        border-radius: 8rpx;
        padding: 2rpx 10rpx;
        font-size: 20rpx;
        font-weight: bold;
        color: rgb(36, 46, 66);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10rpx 4rpx;
      }
      .inputBox {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10rpx;
        margin-left: 5px;
        
        .ImgUpload {
          display: flex;
          margin: 10upx 0;
        }
        .value {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          color: #242e42;
          font-size: 24rpx;
          font-weight: bold;
        }
        .arrow {
          width: auto;
          font-size: 24rpx;
          .codeBtn {
            font-size: 24rpx;
            background-color: #d1cbcb2d;
          }
        }
       
      }
    }
  }
  .i-header {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: -7px;
      left: 0;
      width: 100%;
      height: 14px;
      background: radial-gradient(var(--right-linear) 0px, var(--right-linear) 5px, transparent 5px, transparent);
      background-size: 14px 14px;
      z-index: 9;
    }
    padding: 30upx 0;
    width: 100%;
    background-color: #f7f7f7;
    color: #242e42;
    .tabbox {
      position: relative;
      padding: 20upx 10%;
      display: flex;
      justify-content: space-around;
      .li {
        width: 50%;
        background-color: transparent;
        font-size: 32upx;
        outline: none;
        text-align: center;
      }
      .li.active {
        font-weight: bold;
      }
      .bottom-line {
        position: absolute;
        left: calc(50% - 220rpx);
        bottom: 0;
        width: 160rpx;
        height: 2.5px;
        border-radius: 20px;
        background: var(--main-color);
        transition: left 0.5s ease;

        &.right {
          left: calc(50% + 60rpx);
        }
      }
    }
  }
}
</style>