@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="nav">
|
||||
<view v-for="(item,index) in list" @click="towhere(index)">
|
||||
<view class="imgs">
|
||||
<img :src="item.icon" alt="" v-if="!item.show" :style="{'width':item.width,'height':item.height}">
|
||||
<img :src="item.icon1" alt="" v-else :style="{'width':item.width,'height':item.height}">
|
||||
</view>
|
||||
<view :class="item.show?'textscur':'texts'">{{item.text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg">
|
||||
<img :src="bg" alt="" class="bgs">
|
||||
|
||||
<view v-for="(item,index) in curlist">
|
||||
<block v-for="(m,i) in item">
|
||||
<uni-transition duration="1500" ref="ani" custom-class="transition"
|
||||
:show="index === currentIndex">
|
||||
<img :src="dl_cur" alt="" :style="{'top':m.top,'left':m.left,'right':m.right}" class="curs">
|
||||
</uni-transition>
|
||||
<!-- <u-transition :show="true" mode="fade" duration='1000'>
|
||||
<img :src="dl_cur" alt="" :style="{'top':m.top,'left':m.left,'right':m.right}" class="curs">
|
||||
</u-transition> -->
|
||||
</block>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bg: require("./static/dl/dlbg.png"),
|
||||
dl_cur: require("./static/dl/dl_cur.png"),
|
||||
currentIndex: '',
|
||||
isshow:true,
|
||||
curlist: [
|
||||
[{
|
||||
'top': '268rpx',
|
||||
'left': '13rpx',
|
||||
'right': ''
|
||||
}, {
|
||||
'top': '268rpx',
|
||||
'right': '10rpx',
|
||||
'left': ''
|
||||
}, {
|
||||
'top': '320rpx',
|
||||
'right': '10rpx',
|
||||
'left': ''
|
||||
}],
|
||||
[{
|
||||
'top': '290rpx',
|
||||
'right': '50rpx',
|
||||
'left': ''
|
||||
}],
|
||||
[{
|
||||
'top': '424rpx',
|
||||
'left': '',
|
||||
'right': '265rpx',
|
||||
}],
|
||||
[{
|
||||
'top': '424rpx',
|
||||
'left': '266rpx',
|
||||
'right': '',
|
||||
}],
|
||||
],
|
||||
list: [{
|
||||
text: '卫生间',
|
||||
icon: require("./static/dl/dl1.png"),
|
||||
icon1: require("./static/dl/dl1_cur.png"),
|
||||
show: false,
|
||||
width: '42rpx',
|
||||
height: '46rpx'
|
||||
},
|
||||
// {
|
||||
// text: '楼梯',
|
||||
// icon: require("./static/dl/dl2.png"),
|
||||
// icon1: require("./static/dl/dl2_cur.png"),
|
||||
// show: false,
|
||||
// width: '44rpx',
|
||||
// height: '44rpx'
|
||||
// },
|
||||
{
|
||||
text: '电梯',
|
||||
icon: require("./static/dl/dl3.png"),
|
||||
icon1: require("./static/dl/dl3_cur.png"),
|
||||
show: false,
|
||||
width: '38rpx',
|
||||
height: '64rpx'
|
||||
},
|
||||
// {
|
||||
// text: '卫生间',
|
||||
// icon: require("./static/dl/dl4.png"),
|
||||
// icon1: require("./static/dl/dl4_cur.png"),
|
||||
// show: false,
|
||||
// width: '38rpx',
|
||||
// height: '46rpx'
|
||||
// },
|
||||
{
|
||||
text: '服务台',
|
||||
icon: require("./static/dl/dl5.png"),
|
||||
icon1: require("./static/dl/dl5_cur.png"),
|
||||
show: false,
|
||||
width: '44rpx',
|
||||
height: '38rpx'
|
||||
}, {
|
||||
text: '休息区',
|
||||
icon: require("./static/dl/dl6.png"),
|
||||
icon1: require("./static/dl/dl6_cur.png"),
|
||||
show: false,
|
||||
width: '54rpx',
|
||||
height: '38rpx'
|
||||
},
|
||||
// {
|
||||
// text: '出入口',
|
||||
// icon: require("./static/dl/dl7.png"),
|
||||
// icon1: require("./static/dl/dl7_cur.png"),
|
||||
// show: false,
|
||||
// width: '38rpx',
|
||||
// height: '38rpx'
|
||||
// },
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
towhere(index) {
|
||||
|
||||
this.list.map((item, i) => {
|
||||
item.show = false
|
||||
if (index == i) {
|
||||
item.show = !item.show
|
||||
this.currentIndex = item.show ? index : ''
|
||||
// this.ishow = true
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
background-color: #f5ede6;
|
||||
min-height: 100vh;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
/* border:1px solid #ddd; */
|
||||
box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.5);
|
||||
margin: 0 20rpx;
|
||||
padding: 30rpx 15rpx;
|
||||
margin-bottom: 80rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.nav>view {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav>view .imgs {
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.nav>view img {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nav>view .texts {
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.nav>view .textscur {
|
||||
color: #cf995a;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 711rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg img.bgs {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.bg img.curs {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
/* top:0;
|
||||
left:0;
|
||||
right:0 */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 481 B |
|
After Width: | Height: | Size: 482 B |
|
After Width: | Height: | Size: 359 B |
|
After Width: | Height: | Size: 360 B |
|
After Width: | Height: | Size: 690 B |
|
After Width: | Height: | Size: 700 B |
|
After Width: | Height: | Size: 535 B |
|
After Width: | Height: | Size: 527 B |
|
After Width: | Height: | Size: 367 B |
|
After Width: | Height: | Size: 367 B |
|
After Width: | Height: | Size: 515 B |
|
After Width: | Height: | Size: 517 B |
|
After Width: | Height: | Size: 373 B |
|
After Width: | Height: | Size: 385 B |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 60 KiB |
@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<web-view src="https://suzhoushijian.szgmbwg.org.cn?v=1.0"></web-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 26 KiB |
@ -0,0 +1,84 @@
|
||||
{
|
||||
"id": "uni-transition",
|
||||
"displayName": "uni-transition 过渡动画",
|
||||
"version": "1.3.2",
|
||||
"description": "元素的简单过渡动画",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"动画",
|
||||
"过渡",
|
||||
"过渡动画"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||