|
|
@@ -1,5 +1,6 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
+
|
|
|
<head>
|
|
|
<title>巾帼家政</title>
|
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
|
@@ -9,28 +10,75 @@
|
|
|
<meta http-equiv="Pragma" content="no-cache">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
<style>
|
|
|
- * { padding: 0; margin: 0; }
|
|
|
-.titles { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: block; text-align: center; font-size: 0.66666667rem; line-height: 1; padding: .3rem 0; background-color: #fff;}
|
|
|
-.titles span { width: 0.66666667rem; height: 0.66666667rem; position: absolute; top: .25rem; left: 15px; background: url('http://oduj3utzz.bkt.clouddn.com/2018_04_02_green_left.svg'); background-position: center; -moz-background-size: 100%; background-size: 100%; }
|
|
|
-.container { margin-top: 1.4rem; padding: 0 15px; }
|
|
|
-.container .items { margin-bottom: 15px; }
|
|
|
-.container .items .title { text-align: left; padding-left: 15px; line-height: 2; color: #fff; background-color: #abd272; font-size: 0.53333333rem; position: relative; }
|
|
|
-.container .items .title::after { content: ""; display: block; width: 35px; height: 35px; position: absolute; right: 5px; bottom: 0; background: url('http://oduj3utzz.bkt.clouddn.com/2018_04_02_arrow_bottom.svg'); background-position: center; -moz-background-size: 100%; background-size: 100%; }
|
|
|
-.container .items .images { width: 100%; }
|
|
|
-.container .items .images img { width: 100%; }
|
|
|
-.container .fade-enter-active, .container .fade-leave-active { -webkit-transition: opacity .3s; -moz-transition: opacity .3s; transition: opacity .3s; }
|
|
|
-.container .fade-enter, .container .fade-leave-to { opacity: 0; }
|
|
|
-.reservation { position: fixed; bottom: 1.5rem; right: 15px; background: #abd272; width: 60px; font-size: 15px; color: white; text-shadow: 1px 1px 6px #000; height: 60px; line-height: 60px; text-align: center; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0px 0px 15px -3px #000; -moz-box-shadow: 0px 0px 15px -3px #000; box-shadow: 0px 0px 15px -3px #000; }
|
|
|
-</style>
|
|
|
+ *{padding:0;margin:0}.titles{position:fixed;top:0;left:0;right:0;z-index:5;display:block;text-align:center;font-size:.66666667rem;line-height:1;padding:.3rem 0;background-color:#fff}.titles span{width:.66666667rem;height:.66666667rem;position:absolute;top:.25rem;left:15px;background:url('http://oduj3utzz.bkt.clouddn.com/2018_04_02_green_left.svg');background-position:center;-moz-background-size:100%;background-size:100%}.container{margin-top:1.4rem;padding:0 15px}.container .items{margin-bottom:15px}.container .items .title{text-align:left;padding-left:15px;line-height:2;color:#fff;background-color:#abd272;font-size:.53333333rem;position:relative}.container .items .title::after{content:"";display:block;width:35px;height:35px;position:absolute;right:5px;bottom:0;background:url('http://oduj3utzz.bkt.clouddn.com/2018_04_02_arrow_bottom.svg');background-position:center;-moz-background-size:100%;background-size:100%}.container .items .images{width:100%}.container .items .images img{width:100%}.container .fade-enter-active,.container .fade-leave-active{-webkit-transition:opacity .3s;-moz-transition:opacity .3s;transition:opacity .3s}.container .fade-enter,.container .fade-leave-to{opacity:0}.reservation{position:fixed;bottom:1.5rem;right:15px;background:#abd272;width:60px;font-size:15px;color:white;text-shadow:1px 1px 6px #000;height:60px;line-height:60px;text-align:center;-moz-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 0 15px -3px #000;-moz-box-shadow:0 0 15px -3px #000;box-shadow:0 0 15px -3px #000}
|
|
|
+ </style>
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
- <div id=app><div class=titles>服务介绍<span @click=back></span></div><div class=container><div class=items v-for='item in imgs'><div class=title @click='btnShow(item.name)'>{{item.name}}</div><transition name=fade><div class=images v-if="item.name == nameShow"><img v-for="images in item.urls" :src=images></div></transition></div></div><div class=reservation @click=back>预约</div><div></div></div>
|
|
|
+ <div id=app>
|
|
|
+ <div class=titles>礼包介绍
|
|
|
+ <span @click=back></span>
|
|
|
+ </div>
|
|
|
+ <div class=container>
|
|
|
+ <div class=items v-for='item in imgs'>
|
|
|
+ <div class=title @click='btnShow(item.name)'>{{item.name}}</div>
|
|
|
+ <transition name=fade>
|
|
|
+ <div class=images v-if="item.name == nameShow">
|
|
|
+ <img v-for="images in item.urls" :src=images>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class=reservation @click=exchange>兑换</div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
<!-- js -->
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
|
|
|
<script src="http://odulvej8l.bkt.clouddn.com/flexible.min.js"></script>
|
|
|
<script>
|
|
|
// 我们的数据对象
|
|
|
- var vm=new Vue({el:"#app",data:{nameShow:"",oldNameShow:"",imgs:{part_time_introduction_page:{name:"醇种土鸡",urls:{0:"http://odulvej8l.bkt.clouddn.com/2018_03_17_part-time_introduction_page_01.jpg",1:"http://odulvej8l.bkt.clouddn.com/2018_03_17_part-time_introduction_page_02.jpg",2:"http://odulvej8l.bkt.clouddn.com/2018_03_17_part-time_introduction_page_03.jpg",3:"http://odulvej8l.bkt.clouddn.com/2018_03_17_part-time_introduction_page_04.jpg",4:"http://odulvej8l.bkt.clouddn.com/2018_03_17_part-time_introduction_page_05.jpg"}},yuesao_introduction_page:{name:"整房杀菌除螨",urls:{0:"http://odulvej8l.bkt.clouddn.com/2018_03_17_yuesao_introduction_page_01.jpg",1:"http://odulvej8l.bkt.clouddn.com/2018_03_17_yuesao_introduction_page_02.jpg",2:"http://odulvej8l.bkt.clouddn.com/2018_03_17_yuesao_introduction_page_03.jpg",3:"http://odulvej8l.bkt.clouddn.com/2018_03_17_yuesao_introduction_page_04.jpg",4:"http://odulvej8l.bkt.clouddn.com/2018_03_17_yuesao_introduction_page_05.jpg",5:"http://odulvej8l.bkt.clouddn.com/2018_03_17_yuesao_introduction_page_06.jpg"}},nursery_teacher_introduction_page:{name:"母婴房深度清洁",urls:{0:"http://odulvej8l.bkt.clouddn.com/2018_03_17_nursery_teacher_introduction_page_01.jpg",1:"http://odulvej8l.bkt.clouddn.com/2018_03_17_nursery_teacher_introduction_page_02.jpg",2:"http://odulvej8l.bkt.clouddn.com/2018_03_17_nursery_teacher_introduction_page_03.jpg",3:"http://odulvej8l.bkt.clouddn.com/2018_03_17_nursery_teacher_introduction_page_04.jpg"}}}}},created(){this.btnShow(this.imgs.part_time_introduction_page.name)},methods:{btnShow(_){this.nameShow=this.oldNameShow==_?"":_,this.oldNameShow=this.oldNameShow==_?"":_},back(){location.href="http://common.yiguanjia.me/index.php?r=j/web/index"}}});
|
|
|
+ var vm = new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data: {
|
|
|
+ nameShow: "",
|
|
|
+ oldNameShow: "",
|
|
|
+ imgs: {
|
|
|
+ chicken: {
|
|
|
+ name: "醇种土鸡",
|
|
|
+ urls: {
|
|
|
+ 0: "http://odulvej8l.bkt.clouddn.com/2018_7_25_01.jpg",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ sterilization: {
|
|
|
+ name: "整房杀菌除螨",
|
|
|
+ urls: {
|
|
|
+ 0: "http://odulvej8l.bkt.clouddn.com/2018_7_25_02.jpg",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep_cleaning: {
|
|
|
+ name: "母婴房深度清洁",
|
|
|
+ urls: {
|
|
|
+ 0: "http://odulvej8l.bkt.clouddn.com/2018_7_25_03.jpg",
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.btnShow(this.imgs.chicken.name)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ btnShow(_) {
|
|
|
+ this.nameShow = this.oldNameShow == _ ? "" : _, this.oldNameShow = this.oldNameShow == _ ? "" : _
|
|
|
+ },
|
|
|
+ back() {
|
|
|
+ location.href = "http://common.yiguanjia.me/index.php?r=j/web/index"
|
|
|
+ },
|
|
|
+ exchange() {
|
|
|
+ location.href = "http://common.yiguanjia.me/index.php?r=j/web/index/#/exchange"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
</script>
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|
