114 lines
2.3 KiB
Vue
114 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="letbox">
|
||
|
|
<view class="logo tp">
|
||
|
|
<image src="/static/shouye/logo2.png" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
<view class="cont">
|
||
|
|
<view class="items" v-for="(v,i) in list" :key='i' :class="{'act':i==dexleft}" @click="dexleft = i" @click="emit('navurl',i)">
|
||
|
|
<view class="tm guodu">
|
||
|
|
<image :src="i==dexleft?v.urls:v.url" mode="aspectFill" class="guodu"></image>
|
||
|
|
<text>{{v.name}}</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="heng guodu" :style="i!=dexleft&&i!=list.length-1?'opacity: 1':'opacity: 0'"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="logo tp">
|
||
|
|
<image src="/static/shouye/xd.png" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
|
||
|
|
const props = defineProps({
|
||
|
|
list: {
|
||
|
|
type: Array
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const emit = defineEmits(['navurl'])
|
||
|
|
const dexleft = ref(0);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.letbox{
|
||
|
|
width: 8.2vw;
|
||
|
|
height: 100vh;
|
||
|
|
background:rgba(255, 255, 255, 0.4);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 3.5vw 0 2.5vw 0;
|
||
|
|
.logo{
|
||
|
|
width: 3.8vw;
|
||
|
|
height: 3.8vw;
|
||
|
|
}
|
||
|
|
.cont{
|
||
|
|
width: 4vw;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
.act{
|
||
|
|
background: RGBA(228, 229, 231, 1);
|
||
|
|
border-radius: 1.1vw;
|
||
|
|
.tm{
|
||
|
|
image{
|
||
|
|
width: 2.2vw !important;
|
||
|
|
height: 2.2vw !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.items{
|
||
|
|
width: 4vw;
|
||
|
|
height: 4.5vw;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-top: 1.2vw;
|
||
|
|
padding: 0.25vw 0;
|
||
|
|
.tm{
|
||
|
|
width: 2.2vw;
|
||
|
|
height: 4vw;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
image{
|
||
|
|
width: 2vw;
|
||
|
|
height: 2vw;
|
||
|
|
}
|
||
|
|
text{
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 0.9vw;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.heng{
|
||
|
|
position: absolute;
|
||
|
|
left: 1.2vw;
|
||
|
|
bottom: -0.6vw;
|
||
|
|
width: 1.6vw;
|
||
|
|
height: 2px;
|
||
|
|
border-radius: 1px;
|
||
|
|
background: #c9c9c9;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.tp image{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.guodu {
|
||
|
|
transition: .4s;
|
||
|
|
-webkit-transform-style: preserve-3d;
|
||
|
|
-webkit-overflow-scrolling: touch;
|
||
|
|
}
|
||
|
|
</style>
|