93 lines
2.7 KiB
Vue
93 lines
2.7 KiB
Vue
<template>
|
|
<view class="all-circle">
|
|
<view class="doctorsay-container-up">
|
|
<view v-for="(item,index) in doctorsayList" :key="index" @click="changLeft(index)">
|
|
<view class="doctorsay-container-card"
|
|
:style="index === upmenuIndex ? {background: 'linear-gradient(to right bottom, #00c9ff, #0076ff)'} : {}">
|
|
<image class="doctorsay-container-card-img"
|
|
:src="index === upmenuIndex ? item.targetUrl : item.url" />
|
|
<view
|
|
:class="(index === upmenuIndex) ? `doctorsay-container-card-font-dark`:`doctorsay-container-card-font`">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
const emit = defineEmits(['getDownListIndex']);
|
|
// 初始化下面侧单列表
|
|
const doctorsayList = ref([
|
|
{ url: '/static/index/doctorsay/light/use.png', targetUrl: '/static/index/doctorsay/dark/use.png', name: '日常' },
|
|
{ url: '/static/index/doctorsay/light/clean.png', targetUrl: '/static/index/doctorsay/dark/clean.png', name: '清洁' },
|
|
{ url: '/static/index/doctorsay/light/drink.png', targetUrl: '/static/index/doctorsay/dark/drink.png', name: '饮食' },
|
|
{ url: '/static/index/doctorsay/light/bed.png', targetUrl: '/static/index/doctorsay/dark/bed.png', name: '睡眠' },
|
|
{ url: '/static/index/doctorsay/light/shi.png', targetUrl: '/static/index/doctorsay/dark/shi.png', name: '排泻' },
|
|
]);
|
|
const upmenuIndex = ref(-1)
|
|
//变更左侧菜单
|
|
const changLeft = (index : number) => {
|
|
upmenuIndex.value = index
|
|
emit('getDownListIndex',index)
|
|
setTimeout(()=>{
|
|
upmenuIndex.value = -1
|
|
},400)
|
|
// downList.value = bigArray.value[index].children
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.all-circle {
|
|
position: absolute;
|
|
bottom: 300rpx;
|
|
right: 50rpx;
|
|
width: 400rpx;
|
|
height: 500rpx;
|
|
background-color: rgba(127, 127, 127, 0.1);
|
|
border-radius: 20rpx;
|
|
z-index: 999;
|
|
display: flex;
|
|
// justify-content: center;
|
|
align-items: center;
|
|
.doctorsay-container-up {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-left: 60rpx;
|
|
.doctorsay-container-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: rgb(221, 234, 250);
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
margin: 0 18rpx 15rpx 0rpx;
|
|
border-radius: 30rpx;
|
|
border: 2rpx solid rgb(221, 234, 250);
|
|
box-shadow: 5px 5px 10px rgba(105, 129, 178,0.2);
|
|
|
|
/* 右下角阴影 */
|
|
.doctorsay-container-card-img {
|
|
width: 75rpx;
|
|
height: 75rpx;
|
|
}
|
|
|
|
.doctorsay-container-card-font {
|
|
font-size: 30rpx;
|
|
margin-top: -10rpx;
|
|
}
|
|
|
|
.doctorsay-container-card-font-dark {
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
margin-top: -10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |