|
@@ -1,20 +1,36 @@
|
|
|
<template>
|
|
|
<div class='overview'>
|
|
|
- <p>Overview</p>
|
|
|
- <van-button @click='handleClick' type='primary'>测试</van-button>
|
|
|
+ <p class='test'>Overview</p>
|
|
|
+ <van-button @click='openPreview' type='primary'>测试</van-button>
|
|
|
+ <ImagePreview1 :visible.sync='showImgPreview' :imgList='imgList' />
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import Vue from 'vue'
|
|
|
-import { Button } from 'vant'
|
|
|
-Vue.use(Button)
|
|
|
+import { Button, ImagePreview } from 'vant'
|
|
|
+Vue.use(Button).use(ImagePreview)
|
|
|
+import ImagePreview1 from '../components/ImagePreview'
|
|
|
export default {
|
|
|
name: 'Overview',
|
|
|
props: {},
|
|
|
+ components: { ImagePreview1 },
|
|
|
data() {
|
|
|
- return {}
|
|
|
+ return {
|
|
|
+ showImgPreview: false,
|
|
|
+ imgList: [
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ showImgPreview(val) {
|
|
|
+ console.log('========')
|
|
|
+ console.log(val)
|
|
|
+ },
|
|
|
},
|
|
|
- components: {},
|
|
|
beforeMount() {},
|
|
|
mounted() {
|
|
|
console.log('项目概况页面mounted')
|
|
@@ -23,8 +39,18 @@ export default {
|
|
|
// debugger
|
|
|
},
|
|
|
methods: {
|
|
|
- handleClick(e) {
|
|
|
- console.log(e)
|
|
|
+ openPreview() {
|
|
|
+ this.showImgPreview = true
|
|
|
+ this.imgList = [
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
|
|
+ 'https://img.yzcdn.cn/vant/apple-2.jpg',
|
|
|
+ ].slice(0, parseInt(Math.random() * 8 + 1))
|
|
|
},
|
|
|
},
|
|
|
}
|
|
@@ -34,5 +60,20 @@ export default {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 50px);
|
|
|
// background-color: #87cefa;
|
|
|
+ .img-preview {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (orientation: portrait) {
|
|
|
+ .test {
|
|
|
+ color: lightcoral;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (orientation: landscape) {
|
|
|
+ .test {
|
|
|
+ color: lightgreen;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|