|
|
@@ -0,0 +1,91 @@
|
|
|
+<!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:.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,index) in imgs' :key='index'>
|
|
|
+ <div class=title @click='btnShow(item.name)' ref='gift'>{{item.name}}</div>
|
|
|
+ <transition name=fade>
|
|
|
+ <div class=images v-if="item.name == nameShow">
|
|
|
+ <img @load="imageLoaded(item.index)" 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: "",
|
|
|
+ scroll:[],
|
|
|
+ imgs: {
|
|
|
+ chicken: {
|
|
|
+ name: "巾帼醇种土鸡",
|
|
|
+ index:0,
|
|
|
+ urls: {
|
|
|
+ 0: "http://odulvej8l.bkt.clouddn.com/2018_7_25_01.jpg",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ sterilization: {
|
|
|
+ name: "整房杀菌除螨",
|
|
|
+ index:1,
|
|
|
+ urls: {
|
|
|
+ 0: "http://odulvej8l.bkt.clouddn.com/2018_7_25_02.jpg",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep_cleaning: {
|
|
|
+ name: "母婴房深度清洁",
|
|
|
+ index:2,
|
|
|
+ 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 == _ ? "" : _
|
|
|
+ },
|
|
|
+ imageLoaded(index) {
|
|
|
+ window.scrollTo(0, 58 * index);
|
|
|
+ },
|
|
|
+ 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>
|
north