80 lines
1.6 KiB
Vue
80 lines
1.6 KiB
Vue
<template>
|
|
<div class="view-content">
|
|
<div
|
|
class="select-item"
|
|
v-for="item in list"
|
|
:key="item.id"
|
|
@click="onChange(item.id)"
|
|
:class="{
|
|
active: currentView === item.id,
|
|
}"
|
|
>
|
|
<img :src="getImage(`/home/home-view/${item.id}${currentView === item.id ? '-active' : ''}.png`)" alt="" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { getImage } from '@/utils/comm';
|
|
|
|
const list = [
|
|
{
|
|
id: 'device',
|
|
name: '设备接入视图',
|
|
},
|
|
{
|
|
id: 'ops',
|
|
name: '运营管理视图',
|
|
},
|
|
{
|
|
id: 'comprehensive',
|
|
name: '综合管理视图',
|
|
},
|
|
];
|
|
|
|
const props = defineProps({
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
})
|
|
|
|
const emits = defineEmits(['update:value', 'change'])
|
|
|
|
const currentView = ref<string>('');
|
|
|
|
const onChange = (id: string) => {
|
|
emits('change', id);
|
|
emits('update:value', id)
|
|
}
|
|
|
|
watchEffect(() => {
|
|
currentView.value = (props.value || '') as string
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.view-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.select-item {
|
|
cursor: pointer;
|
|
width: 30%;
|
|
border-radius: 14px;
|
|
color: #333333;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
0px 6px 16px 0px rgba(0, 0, 0, 0.08),
|
|
0px 9px 16px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
}
|
|
</style> |