New file |
| | |
| | | <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: '', |
| | | 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> |