<template>
|
<div class="app-container">
|
<div>
|
<h1 style="font-size:21px;padding-top:30px">早上好！
|
<el-dropdown style="float:right">
|
<span class="el-dropdown-link">
|
<img src="../../assets/images/Frame.png">
|
</span>
|
<el-dropdown-menu slot="dropdown" >
|
<el-dropdown-item v-for="item in dropdownList" :key="item.src" @click="imageSrc=item.src">{{ item.name }}
|
</el-dropdown-item>
|
<!-- <el-dropdown-item >只显示第一代</el-dropdown-item>
|
<el-dropdown-item >显示至第二代</el-dropdown-item>
|
<el-dropdown-item >显示至第三代</el-dropdown-item>
|
<el-dropdown-item >显示全部</el-dropdown-item>-->
|
</el-dropdown-menu>
|
</el-dropdown>
|
|
</h1>
|
<div >
|
<img v-if="imageSrc" :src="imageSrc" alt="" class="background"/>
|
<!-- <img v-for="item in list" v-if="item.id==index" :src="item.path">
|
<img
|
src="src/assets/images/Group 407.png"
|
alt=""
|
class="background"
|
/>
|
<img
|
|
src="../../assets/images/Group 404.png"
|
alt=""
|
class="background"
|
/>-->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "index",
|
data(){
|
return{
|
imageSrc: require('../../assets/images/Group 406.png') ,
|
dropdownList: [
|
{ name: '只显示第一代', src: require('../../assets/images/Group 404.png') },
|
{ name: '显示至第二代', src: require('../../assets/images/Group 405.png') },
|
{ name: '显示至第三代', src: require('../../assets/images/Group 406.png') },
|
{ name: '显示全部', src: require('../../assets/images/Group 407.png') }
|
]
|
}
|
|
},
|
methods:{
|
|
}
|
}
|
</script>
|
|
<style>
|
.app-container{
|
background-color: #FEF7FC;
|
}
|
.el-dropdown{
|
margin-left: auto;
|
}
|
.background {
|
width: auto;
|
height: auto;
|
max-width: 100%;
|
max-height: 100%;
|
}
|
</style>
|
