139 lines
2.8 KiB
Vue
139 lines
2.8 KiB
Vue
<template>
|
|
<view>
|
|
<view class="letbox" :style="style">
|
|
<view class="logomain tp">
|
|
<image src="/static/shouye/logo2.png" mode="aspectFill"></image>
|
|
</view>
|
|
<scroll-view class="cont" :scroll-y="true">
|
|
<view class="items" v-for="(v,i) in list" :key='i' :class="{'act':i==dexleft}" @click="dexleft = i;emit('navurl',i,v)">
|
|
<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>
|
|
</scroll-view>
|
|
<view class="logo">
|
|
<view class="tp">
|
|
<image src="/static/shouye/xd.png" mode="aspectFill"></image>
|
|
</view>
|
|
<text>{{uni.getStorageSync('realname')}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
|
|
const props = defineProps({
|
|
list: {
|
|
type: Array
|
|
},
|
|
style:{
|
|
type:String
|
|
}
|
|
});
|
|
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.8vw 0 1vw 0;
|
|
margin-right: 3vw;
|
|
.logo{
|
|
width: 3.8vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
view{
|
|
width: 3.8vw;
|
|
height: 3.8vw;
|
|
}
|
|
text{
|
|
font-size: 1.2vw;
|
|
margin-top: 0.6vw;
|
|
color: #666666;
|
|
}
|
|
}
|
|
.logomain{
|
|
width: 6vw;
|
|
height: 6vw;
|
|
}
|
|
.cont{
|
|
width: 6vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 5vh;
|
|
height: 60vh;
|
|
// background-color: red;
|
|
.act{
|
|
background: RGBA(228, 229, 231, 1);
|
|
border-radius: 1.1vw;
|
|
.tm{
|
|
image{
|
|
width: 2.2vw !important;
|
|
height: 2.2vw !important;
|
|
}
|
|
}
|
|
}
|
|
.items{
|
|
width: 6vw;
|
|
height: 4.5vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.8vw;
|
|
padding: 0.25vw 0;
|
|
.tm{
|
|
width: 6vw;
|
|
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>
|