script
<script setup>
import { ref } from "vue";//控制轮播图页码
let current = ref(0);//答题逻辑
const add = (value) => {if (current.value < 9) {current.value = current.value + 1;} else {uni.switchTab({url: "/pages/my/my",});}
};
</script><template>
<template><view class="box"><view class="nar"><!-- 利用uview-plus插件中的线性进度条来实现功能 --><u-icon name="arrow-left" color="#000000" size="24"></u-icon><!-- 文字 --><text>抑郁测评专业版</text></view><view><!--利用轮播图实现--><swiper duration="0" :current="current" style="height: 500px"><template v-for="(item1, index) in 10"><swiper-item @touchmove.stop="" class="swiper"><!-- 进度条 --><view class="jindu"><text>测评进度</text><view class="progress"><u-line-progress:showText="false":percentage="(index + 1) * 10"activeColor="#2d8dfe"></u-line-progress></view><text>{{ index + 1 }}/10</text></view><!-- 题目 --><view class="topic"><view class="text">你是否经常感到心情低落，或是感到心情郁闷？生活,前景?</view></view><!-- 选项 --><view class="options"><!-- title --><view class="title"><u-tag text="单选题" type="primary" shape="circle"></u-tag></view><!-- 选项 --><template v-for="item in 4"><view @click="add()" class="option"><view class="text">完全不会</view></view></template></view></swiper-item></template></swiper></view></view>
</template>style
<style lang="scss" scoped>
.box {height: 100vh;background: linear-gradient(to bottom, #b6cff3, #f5ecf4);.nar {padding-top: 40rpx;padding-bottom: 40rpx;height: 80rpx;width: 460rpx;display: flex;align-items: center;justify-content: space-between;padding-left: 20rpx;padding-right: 20rpx;}
}
//进度样式
.jindu {padding-left: 20rpx;padding-right: 20rpx;padding-top: 20rpx;display: flex;height: 32rpx;align-items: center;justify-content: space-between;//进度条.progress {width: 460rpx;}
}
//题目样式
.topic {background-color: white;height: 130rpx;margin-left: 20rpx;margin-right: 20rpx;margin-top: 60rpx;border-radius: 10rpx;.text {padding: 18rpx;}
}//选项样式
.options {margin-top: 40rpx;margin-left: 20rpx;margin-right: 20rpx;background-color: #f0eaf4;border-radius: 10rpx;height: 700rpx;//标签title.title {width: 130rpx;padding: 16rpx;}//具体选项.option {margin: 16rpx;margin-top: 24rpx;background-color: #ffffff;height: 100rpx;border-radius: 10rpx;display: flex;align-items: center;.text {padding-left: 16rpx;}}:active.option {background-color: #ebf4ff;color: #52a2ff;}
}
</style>效果：
