134 lines
2.9 KiB
Vue
134 lines
2.9 KiB
Vue
|
<script setup>
|
||
|
|
// 引入依赖
|
||
|
|
import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
|
||
|
|
import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
|
||
|
|
import { onLoad } from "@dcloudio/uni-app"
|
||
|
|
// import mySwiper from "@/components/mySwiper.vue"
|
||
|
|
import {ref,onMounted,nextTick} from "vue"
|
||
|
|
import {useStore} from '@/store/index.js'
|
||
|
|
import api from "@/api/index.js"
|
||
|
|
const store = useStore()
|
||
|
|
onLoad((e) => {
|
||
|
|
randomFunc()
|
||
|
|
})
|
||
|
|
// 变量
|
||
|
|
const res = ref([
|
||
|
|
4.1,
|
||
|
|
4.5
|
||
|
|
])
|
||
|
|
const userInfo = ref(null)
|
||
|
|
const bg_imgs = ref([
|
||
|
|
'/static/result1.jpg',
|
||
|
|
'/static/result2.jpg',
|
||
|
|
'/static/result3.jpg',
|
||
|
|
])
|
||
|
|
const bg_index = ref(0)
|
||
|
|
// 函数
|
||
|
|
function randomFunc() {
|
||
|
|
bg_index.value = parseInt((Math.random()*3))
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<view class="visionTestBox page-box">
|
||
|
|
<!-- <view class="actionBox" :style="{background:`url(${bg_imgs[bg_index]})`}">
|
||
|
|
测试
|
||
|
|
</view> -->
|
||
|
|
<view class="actionBox">
|
||
|
|
<view class="img-box">
|
||
|
|
<image style="width: 100%;" :src="bg_imgs[bg_index]" mode="widthFix"></image>
|
||
|
|
<view class="res-text-row">
|
||
|
|
<view class="rtr-left">4.5</view>
|
||
|
|
<view class="rtr-right">4.1</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.img-box{
|
||
|
|
position: relative;
|
||
|
|
.res-text-row{
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
position: absolute;
|
||
|
|
top: 47%;
|
||
|
|
font-weight: 900;
|
||
|
|
.rtr-left{
|
||
|
|
margin-left: 20%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.visionTestBox,.actionBox{
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.actionBox{
|
||
|
|
.ab-show-box{
|
||
|
|
// width: 100%;
|
||
|
|
height: 50%;
|
||
|
|
border: 2rpx solid #d0d0d0;
|
||
|
|
margin: 10rpx;
|
||
|
|
margin-top: 0px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
image{
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.ab-action-box{
|
||
|
|
.ac-row{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
.ac-row-card-text{
|
||
|
|
padding: 10rpx !important;
|
||
|
|
width: 80rpx !important;
|
||
|
|
height: 80rpx !important;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.ac-row-card{
|
||
|
|
// white-space: nowrap;
|
||
|
|
margin: 20rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
padding: 30rpx;
|
||
|
|
box-shadow: 2rpx 20rpx 40rpx #dfdfdf;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content-text{
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
.ct-title{
|
||
|
|
text-align: center;
|
||
|
|
font-size: 34px;
|
||
|
|
color: #26758d;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.okBtn{
|
||
|
|
width: 100%;
|
||
|
|
color: white;
|
||
|
|
background-color: #26758d;
|
||
|
|
padding: 20rpx;
|
||
|
|
text-align: center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
}
|
||
|
|
.pop-box{
|
||
|
|
.pb-title{
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 40rpx;
|
||
|
|
}
|
||
|
|
background-color: white;
|
||
|
|
padding: 20rpx;
|
||
|
|
width: 80%;
|
||
|
|
margin: 0 auto;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
}
|
||
|
|
</style>
|