项目模块—实现抑郁测评(小程序)

script

import { ref } from "vue";
//控制轮播图页码
let current = ref(0);
//答题逻辑
const add = (value) => {
  if (current.value  
 
  
    
      
      
      
      抑郁测评专业版
    
    
        
      
        
          
            
            
              测评进度
              
              {{ index + 1 }}/10
            
            
            
              你是否经常感到心情低落，或是感到心情郁闷？生活,前景?
            
            
            
              
              
              
              
                完全不会
              
            
          
        
      
    
  
 
style
 
.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;
  }
}
 
 
 
效果：