|
|
@@ -0,0 +1,36 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <title>巾帼家政</title>
|
|
|
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
|
|
|
+ <meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
|
+ <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>
|
|
|
+</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>
|
|
|
+ <!-- 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"}}});
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
