猫妈狗爸伴宠师小程序前端代码
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.
 
 
 
 

139 lines
2.7 KiB

<template>
<!-- <view>基本考核完成</view> -->
<view class="page po-r">
<image src="" mode="" class="mainBg"></image>
<view class="w-100 po-a content">
<stepProgress :step="2"></stepProgress>
<view class="info">
<view class="top">
<view class="top-title">
<up-icon class="icon" name="checkmark-circle-fill" color="#FFBF60" size="34rpx"></up-icon>
<text>基本考核答题已完成</text>
</view>
<view class="top-desc">
<up-icon class="icon" name="error-circle" color="#707070" size="27rpx"></up-icon>
<text>进行培训考核的答题前请认真观看下面的视频和资料</text>
</view>
</view>
<view class="info-item">
<view class="info-item-title">
平台&服务介绍
</view>
<view class="flex-between">
<view class="veo_">
<video src=""></video>
猫妈狗爸平台介绍
</view>
<view class="">
<video src=""></video>
喂养学习视频
</view>
</view>
</view>
<view class="info-item">
<view class="info-item-title">
服务培训
</view>
</view>
<view class="footer-btn">
<view class="btn" @click="toNext">
进入培训考核
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import stepProgress from '../components/stepProgress.vue';
const toNext = () => {
uni.navigateTo({
url: "/otherPages/authentication/examination/train"
})
}
</script>
<style scoped lang="scss">
.page {
position: relative;
.mainBg {
width: 100vw;
height: 442rpx;
background-image: linear-gradient(to bottom, #FFBF60, #f5f5f5);
}
.content {
top: 0;
left: 0;
padding: 16rpx;
}
}
.info{
box-sizing: border-box;
width: 100%;
height: auto;
background-color: #FFFFFF;
padding: 22rpx 20rpx 38rpx 20rpx;
border-radius: 16rpx;
.top{
width: 100%;
background-color: #FFFCF1;
padding: 19rpx 26rpx;
border-radius: 16rpx;
color: #707070;
&-title {
font-size: 28rpx;
}
&-desc {
margin-top: 22rpx;
font-size: 22rpx;
}
}
&-item {
&-title {
&::before {
content: "";
display: block;
width: 9rpx;
height: 33rpx;
background-color: #FFBF60;
margin-right: 7rpx;
}
}
}
}
.footer-btn {
width: 100vw;
height: 144rpx;
background-color: #fff;
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
left: 0;
align-items: center;
.btn {
font-size: 30rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
width: 574rpx;
height: 94rpx;
border-radius: 94rpx;
background-color: #FFBF60;
}
}
</style>