├── .gitignore
├── dist
    ├── 2.2.js.map
    ├── 2.2.js
    ├── 1.1.js
    └── 1.1.js.map
├── README.md
├── package.json
├── src
    ├── views
    │   ├── paged
    │   │   ├── toonelevel.vue
    │   │   ├── vfor.vue
    │   │   ├── paged.vue
    │   │   └── vmodel.vue
    │   ├── list.vue
    │   ├── home.vue
    │   ├── detail.vue
    │   └── tab.vue
    ├── app.vue
    └── app.js
├── gulpfile.js
├── index.html
└── static
    └── styles
        └── mall.css


/.gitignore:
--------------------------------------------------------------------------------
1 | *.xml
2 | *.iml
3 | node_modules/
4 | .idea/
5 | 


--------------------------------------------------------------------------------
/dist/2.2.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"2.2.js","sourcesContent":[],"sourceRoot":""}


--------------------------------------------------------------------------------
/dist/2.2.js:
--------------------------------------------------------------------------------
 1 | webpackJsonp([2],{
 2 | 
 3 | /***/ 83:
 4 | /***/ function(module, exports) {
 5 | 
 6 | 
 7 | 
 8 | /***/ }
 9 | 
10 | });
11 | //# sourceMappingURL=2.2.js.map


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-spa-demo
 2 | >DEMO说明
 3 | 
 4 | 1.  新增v-bind v-model v-for
 5 | 2.  演示常见需求:vuejs结合vue-router 配合transition指令动画
 6 | 版本依赖  
 7 | 
 8 | * vuejs 1.0.0-rc.2
 9 | * vue-router 0.7.5
10 | * ui部分为SUI
11 | 
12 | >效果浏览  
13 | 
14 | （图片缓冲 稍等片刻）  
15 | 
16 | ![vue-spa-demo](http://7jpswm.com1.z0.glb.clouddn.com/vue-spavue-spa-demo-3.gif)
17 | 
18 | >安装&使用方法
19 | 
20 | 1. 直接使用:build文件夹及index.html即可为打包好的
21 | 2. npm install
22 | 3. gulp or gulp watch
23 | 
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-spa-demo",
 3 |   "version": "1.0.0",
 4 |   "description": "seed-project-by vue",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "devDependencies": {
12 |     "css-loader": "^0.19.0",
13 |     "gulp": "^3.9.0",
14 |     "gulp-webpack": "^1.5.0",
15 |     "style-loader": "^0.12.4",
16 |     "vinyl-named": "^1.1.0",
17 |     "vue-html-loader": "^1.0.0",
18 |     "vue-loader": "^3.0.4",
19 |     "webpack": "^1.12.2"
20 |   },
21 |   "dependencies": {
22 |     "vue": "^1.0.0-rc.2",
23 |     "vue-router": "^0.7.5"
24 | 
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/views/paged/toonelevel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div  transition="page" class="page page-current">
 3 |         <header class="bar bar-nav">
 4 |             <a class="button button-link button-nav pull-left back"  v-link="{path:'/D'}">
 5 |                 <span class="icon icon-left"></span>
 6 |                 返回
 7 |             </a>
 8 |             <h1 class="title">演示跳转一级页</h1>
 9 |         </header>
10 |         <div class="content">
11 |             <div class="circle_box">
12 |                 <div class="circle_top">
13 |                     <div class="circle" id="circle">
14 |                         <div class="text_box" id="text_box">
15 |                             <p class="text">文本1</p>
16 |                             <p class="count">文本2</p>
17 |                         </div>
18 |                     </div>
19 |                 </div>
20 |                 <div class="select">
21 |                     <a id="shop" v-link="{path:'/B'}"><span>跳到B页</span></a>
22 |                 </div>
23 |             </div>
24 |         </div>
25 |     </div>
26 | </template>
27 | <script>
28 |     module.exports = {
29 |         data: function(){
30 |             return {
31 |             }
32 |         },
33 |         methods:{
34 |         }
35 |     }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp')
 2 | var webpack = require('gulp-webpack')
 3 | var named = require('vinyl-named')
 4 | 
 5 | 
 6 | var appList = ['app']
 7 | 
 8 | 
 9 | gulp.task('default', ['bundle'], function() {
10 |     console.log('done')
11 | })
12 | 
13 | gulp.task('bundle', function() {
14 |     return gulp.src(mapFiles(appList, 'js'))
15 |         .pipe(named())
16 |         .pipe(webpack(getConfig()))
17 |         .pipe(gulp.dest('dist/'))
18 | })
19 | 
20 | gulp.task('watch', function() {
21 |     return gulp.src(mapFiles(appList, 'js'))
22 |         .pipe(named())
23 |         .pipe(webpack(getConfig({watch: true})))
24 |         .pipe(gulp.dest('dist/'))
25 | })
26 | 
27 | 
28 | /**
29 |  * @private
30 |  */
31 | function getConfig(opt) {
32 |     var config = {
33 |         module: {
34 |             loaders: [
35 |                 { test: /\.vue$/, loader: 'vue'},
36 |                 { test: /\.png$/, loader: "url-loader?mimetype=image/png" }
37 |             ]
38 |         },
39 |         devtool: 'source-map'
40 |     }
41 |     if (!opt) {
42 |         return config
43 |     }
44 |     for (var i in opt) {
45 |         config[i] = opt[i]
46 |     }
47 |     return config
48 | }
49 | 
50 | /**
51 |  * @private
52 |  */
53 | function mapFiles(list, extname) {
54 |     return list.map(function (app) {return 'src/' + app + '.' + extname})
55 | }


--------------------------------------------------------------------------------
/src/app.vue:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .body {
 3 | }
 4 | </style>
 5 | 
 6 | <template>
 7 |     <div class="page page-current">
 8 | 
 9 |         <nav class="bar bar-tab" v-if="isIndex" >
10 |             <a class="tab-item" external v-link="{ path: '/home',activeClass: 'active'}">
11 |                 <span class="icon icon-home"></span>
12 |                 <span class="tab-label">首页</span>
13 |             </a>
14 |             <a class="tab-item" external v-link="{ path: '/B',activeClass: 'active' }">
15 |                 <span class="icon icon-gift"></span>
16 |                 <span class="tab-label">B页</span>
17 |             </a>
18 |             <a class="tab-item" external  v-link="{ path: '/C',activeClass: 'active' }">
19 |                 <span class="icon icon-app"></span>
20 |                 <span class="tab-label">C页</span>
21 |             </a>
22 |             <a class="tab-item" external v-link="{ path: '/D',activeClass: 'active' }">
23 |                 <span class="icon icon-me"></span>
24 |                 <span class="tab-label">D页</span>
25 |             </a>
26 |         </nav>
27 |         <!-- 缓存一级路由切换的页面 -->
28 |         <router-view keep-alive></router-view>
29 |     </div>
30 | </template>
31 | 
32 | <script>
33 | module.exports = {
34 |     data :function() {
35 |         return {
36 |             authenticating: false,
37 |             isIndex:true
38 |         }
39 |     }
40 | }
41 | </script>
42 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <title>VUEJS-SPA-DEMO</title>
 7 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1">
 8 |     <link rel="shortcut icon" href="/favicon.ico">
 9 |     <meta name="apple-mobile-web-app-capable" content="yes">
10 |     <meta name="apple-mobile-web-app-status-bar-style" content="black">
11 |     <link rel="stylesheet" href="//g.alicdn.com/sui-mobile/sm/0.5.0/css/sm.min.css">
12 |     <link rel="stylesheet" href="static/styles/mall.css">
13 |     <style>
14 |         .page-enter {
15 |             z-index: 2002;
16 |             -webkit-animation: pageFromRightToCenter 400ms forwards;
17 |             -o-animation: pageFromRightToCenter 400ms forwards;
18 |             animation: pageFromRightToCenter 400ms forward
19 |         }
20 |         .page-leave {
21 |             z-index: 2002;
22 |             -webkit-animation: pageFromCenterToRight 400ms forwards;
23 |             -o-animation: pageFromCenterToRight 400ms forwards;
24 |             animation: pageFromCenterToRight 400ms forwards
25 |         }
26 |     </style>
27 | </head>
28 | <body class="theme-yellow">
29 | <div id="app">
30 | </div>
31 | <div class="panel-overlay"></div>
32 | <script src="//g.alicdn.com/sj/lib/zepto/zepto.js"></script>
33 | <script src="//g.alicdn.com/sui-mobile/sm/0.5.0/js/sm.js"></script>
34 | <script src="//g.alicdn.com/sui-mobile/sm/0.5.0/js/sm-extend.js"></script>
35 | <script src="dist/app.js"></script>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/src/views/list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="gift" class="content">
 3 |         <div class="row no-gutter">
 4 |             <a v-for="record in records"  class="col-50" v-link="{ name: 'detail', params: { recordId: record.id }}" v-bind:class="{'list-item__left':($index%2==0?true:false),'list-item__right':($index%2==0?false:true)}">
 5 |                 <div class="content-padded list-item__info">
 6 |                     <p class="mod_state"><span>{{record.supplier}}</span><span vs-if="!record.isHave" class="state state_grey">干啥</span></p>
 7 |                     <p>{{record.title}}</p>
 8 |                     <p>{{record.per_count}}<span class="per_count"></span></p>
 9 |                 </div>
10 |                 <div class="no-gutter">
11 |                     <img class="mod_img" src={{record.pic}} alt="">
12 |                 </div>
13 |             </a>
14 |         </div>
15 |     </div>
16 |     <router-view>
17 |     </router-view>
18 | </template>
19 | 
20 | <script>
21 |     module.exports = {
22 |         data: function(){
23 |             return {
24 |                 records : [
25 |                     {id:"11073",title:"文本",supplier:"文本2",pic:"http://7jpswm.com1.z0.glb.clouddn.com/vue-spa50.pic.jpg",per_count:"250",isHave:true},
26 |                     {id:"12073",title:"文本",supplier:"文本2",pic:"http://7jpswm.com1.z0.glb.clouddn.com/vue-spa50.pic.jpg",per_count:"250",isHave:false},
27 |                     {id:"13073",title:"文本",supplier:"文本2",pic:"http://7jpswm.com1.z0.glb.clouddn.com/vue-spa50.pic.jpg",per_count:"250",isHave:true},
28 |                     {id:"14073",title:"文本",supplier:"文本2",pic:"http://7jpswm.com1.z0.glb.clouddn.com/vue-spa50.pic.jpg",per_count:"250",isHave:false}
29 |                 ]
30 |             }
31 |         },
32 |         ready: function () {
33 |             console.log(this) // -> 'foo'
34 |         },
35 |         methods:{
36 | 
37 |         }
38 |     }
39 | </script>
40 | 


--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
 1 | // With proper loader configuration you can load,
 2 | // pre-process and insert css directly with require().
 3 | // See webpack.config.js for details.
 4 | var Vue = require('vue')
 5 | var VueRouter = require('vue-router')
 6 | Vue.use(VueRouter);
 7 | 
 8 | var app = Vue.extend(require('./app.vue'))
 9 | 
10 | var router = new VueRouter({
11 |     hashbang: true //hash路由
12 | })
13 | 
14 | //路由表
15 | router.map({
16 |     '/home': {
17 |         component: require('./views/home.vue')
18 |     },
19 |     '/B': {
20 |         component: require('./views/list.vue'),
21 |         //子路由
22 |         subRoutes:{
23 |             'detail/:giftId': {
24 |                 name: 'detail', //具名路由
25 |                 component: require('./views/detail.vue')
26 |             }
27 |         }
28 |     },
29 |     '/C': {
30 |         component: require('./views/tab.vue')
31 |     },
32 |     '/D': {
33 |         component: require('./views/paged/paged.vue'),
34 |         subRoutes: {
35 |             '/toonelevel': {
36 |                 component: require('./views/paged/toonelevel.vue')
37 |             },
38 |             '/vfor': {
39 |                 component: require('./views/paged/vfor.vue')
40 |             },
41 |             '/vmodel': {
42 |                 component: require('./views/paged/vmodel.vue')
43 |             }
44 |         }
45 |     }
46 | })
47 | 
48 | //默认/重定向到home页
49 | router.redirect({
50 |     '/':"/home"
51 | })
52 | //注册路由切换前
53 | //使底部菜单栏在一级路由切换时一直保持显示
54 | //在二级页时隐藏
55 | router.beforeEach(function (transition) {
56 |     var toPath = transition.to.path;
57 |     console.info()
58 |     if(toPath.replace(/[^/]/g,"").length>1){
59 |         router.app.isIndex = false;
60 |     }else{
61 |         router.app.isIndex = true;
62 |     }
63 |     transition.next()
64 | })
65 | //注册路由切换后
66 | router.afterEach(function (transition) {
67 |     console.log('成功浏览到: ' + transition.to.path)
68 |     $.refreshScroller();
69 | })
70 | 
71 | router.start(app, '#app');
72 | //暴漏路由调试接口
73 | window.router = router;


--------------------------------------------------------------------------------
/dist/1.1.js:
--------------------------------------------------------------------------------
 1 | webpackJsonp([1],{
 2 | 
 3 | /***/ 83:
 4 | /***/ function(module, exports, __webpack_require__) {
 5 | 
 6 | 	__webpack_require__(84)
 7 | 	module.exports = __webpack_require__(86)
 8 | 	module.exports.template = __webpack_require__(87)
 9 | 
10 | 
11 | /***/ },
12 | 
13 | /***/ 84:
14 | /***/ function(module, exports, __webpack_require__) {
15 | 
16 | 	// style-loader: Adds some css to the DOM by adding a <style> tag
17 | 	
18 | 	// load the styles
19 | 	var content = __webpack_require__(85);
20 | 	if(typeof content === 'string') content = [[module.id, content, '']];
21 | 	// add the styles to the DOM
22 | 	var update = __webpack_require__(76)(content, {});
23 | 	if(content.locals) module.exports = content.locals;
24 | 	// Hot Module Replacement
25 | 	if(false) {
26 | 		// When the styles change, update the <style> tags
27 | 		if(!content.locals) {
28 | 			module.hot.accept("!!./../../node_modules/css-loader/index.js!./../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./gift.vue", function() {
29 | 				var newContent = require("!!./../../node_modules/css-loader/index.js!./../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./gift.vue");
30 | 				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
31 | 				update(newContent);
32 | 			});
33 | 		}
34 | 		// When the module is disposed, remove the <style> tags
35 | 		module.hot.dispose(function() { update(); });
36 | 	}
37 | 
38 | /***/ },
39 | 
40 | /***/ 85:
41 | /***/ function(module, exports, __webpack_require__) {
42 | 
43 | 	exports = module.exports = __webpack_require__(75)();
44 | 	// imports
45 | 	
46 | 	
47 | 	// module
48 | 	exports.push([module.id, ".body {\n        background: #fff;\n    }", ""]);
49 | 	
50 | 	// exports
51 | 
52 | 
53 | /***/ },
54 | 
55 | /***/ 86:
56 | /***/ function(module, exports) {
57 | 
58 | 
59 | 
60 | /***/ },
61 | 
62 | /***/ 87:
63 | /***/ function(module, exports) {
64 | 
65 | 	module.exports = "<div>gift</div>";
66 | 
67 | /***/ }
68 | 
69 | });
70 | //# sourceMappingURL=1.1.js.map


--------------------------------------------------------------------------------
/src/views/home.vue:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .body {
 3 |         background: #fff;
 4 |     }
 5 | </style>
 6 | 
 7 | <template>
 8 |     <div id="home" class="content">
 9 |         <div class="swiper-container" data-space-between="10" data-pagination=".swiper-pagination">
10 |             <div class="swiper-wrapper">
11 |                 <div v-for="slide in slides" class="swiper-slide"><img src="{{slide.img}}" alt="" style="width: 100%"></div>
12 |             </div>
13 |             <div class="swiper-pagination"></div>
14 |         </div>
15 | 
16 |         <div v-for="good in goods">
17 |             <div class="content-block-title">{{good.title}}</div>
18 |             <div class="list-block">
19 |                 <ul>
20 |                     <li class="item-content">
21 |                         <div class="item-media"><i class="icon icon-f7"></i></div>
22 |                         <div class="item-inner">
23 |                             <div class="item-title">商品名称</div>
24 |                             <div class="item-after">{{good.name}}</div>
25 |                         </div>
26 |                     </li>
27 |                     <li class="item-content">
28 |                         <div class="item-media"><i class="icon icon-f7"></i></div>
29 |                         <div class="item-inner">
30 |                             <div class="item-title">型号</div>
31 |                             <div class="item-after">{{good.type}}</div>
32 |                         </div>
33 |                     </li>
34 |                 </ul>
35 |             </div>
36 |         </div>
37 | 
38 |     </div>
39 | </template>
40 | 
41 | <script>
42 |     module.exports = {
43 |         data: function(){
44 |             return {
45 |                 goods: [
46 |                     {title: "幸福福利1", name: "杜蕾斯超薄", type: "超薄"},
47 |                     {title: "幸福福利2", name: "杜蕾斯延时", type: "延时"}
48 |                 ],
49 |                 slides: [
50 |                     {img: "http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_640x640q60.jpg"},
51 |                     {img: "http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_640x640q60.jpg"},
52 |                     {img: "http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_640x640q60.jpg"},
53 |                 ]
54 |             }
55 |         },
56 |         ready: function () {
57 |             console.log("home-dom准备完毕") // -> 'foo'
58 |             $(".swiper-container").swiper();
59 |         }
60 |     }
61 | </script>
62 | 


--------------------------------------------------------------------------------
/src/views/paged/vfor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="page page-current" transition="page" >
 3 |         <header class="bar bar-nav">
 4 |             <a class="button button-link button-nav pull-left back" v-link="{path:'/D'}">
 5 |                 <span class="icon icon-left"></span>
 6 |                 返回
 7 |             </a>
 8 |             <h1 class="title">演示v-for&子路由跳转</h1>
 9 |             <!-- 由my的子路由change 跳转到 gift下的子路由detail-->
10 |         </header>
11 |         <div class="content">
12 |             <div class="list-block media-list inset">
13 |                 <ul style="background: none!important;">
14 |                     <li v-for="record in records" style="background-color: #fff;border-radius: .35rem;margin-bottom: 5px;">
15 |                         <a v-link="{name: 'detail', params: { giftId: record.id }}" class="item-link item-content">
16 |                             <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
17 |                             <div class="item-inner">
18 |                                 <div class="item-title-row">
19 |                                     <div class="item-title font_little">{{record.title}}<span class="content_count">{{record.count}}</span></div>
20 |                                 </div>
21 |                                 <div v-show="record.explan" class="item-text">{{record.explan}}</div>
22 |                                 <div v-show="!record.explan" class="item-text">文本:<span class="orange">{{record.code}}</span></div>
23 |                                 <div v-show="!record.explan" class="item-text"><span class="expire">有效期{{record.start_date}}至{{record.end_date}}</span></div>
24 |                             </div>
25 |                         </a>
26 |                     </li>
27 |                 </ul>
28 |             </div>
29 | 
30 |         </div>
31 |     </div>
32 | </template>
33 | <script>
34 |     module.exports = {
35 |         data: function(){
36 |             return {
37 |                 records:[
38 |                     {id:1,title:"你",count:"100",result:false,explan:"太难编了",start_date:"2015-09-01",end_date:"2015-09-30"},
39 |                     {id:2,title:"我",count:"100",result:false,explan:"太难编了",start_date:"2015-09-01",end_date:"2015-09-30"},
40 |                     {id:3,title:"他",count:"100",result:true,explan:"",code:"123456789",start_date:"2015-09-01",end_date:"2015-09-30"}
41 |                 ]
42 |             }
43 |         },
44 |         methods:{
45 |         }
46 |     }
47 | </script>


--------------------------------------------------------------------------------
/dist/1.1.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///./src/views/gift.vue","webpack:///./src/views/gift.vue?6ad0","webpack:///./src/views/gift.vue?df10","webpack:///./src/views/gift.vue?646e"],"names":[],"mappings":";;;;;AAAA;AACA;AACA;;;;;;;;ACFA;;AAEA;AACA;AACA;AACA;AACA,iDAAmF;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA,iCAAgC,UAAU,EAAE;AAC5C,E;;;;;;;ACpBA;AACA;;;AAGA;AACA,kCAAiC,2BAA2B,OAAO;;AAEnE;;;;;;;;;;;;;;;ACPA,oC","file":"1.1.js","sourcesContent":["require(\"-!style!css!./../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./gift.vue\")\nmodule.exports = require(\"-!./../../node_modules/vue-loader/lib/selector.js?type=script&index=0!./gift.vue\")\nmodule.exports.template = require(\"-!vue-html!./../../node_modules/vue-loader/lib/selector.js?type=template&index=0!./gift.vue\")\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/views/gift.vue\n ** module id = 83\n ** module chunks = 1\n **/","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!./../../node_modules/css-loader/index.js!./../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./gift.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\n// add the styles to the DOM\nvar update = require(\"!./../../node_modules/style-loader/addStyles.js\")(content, {});\nif(content.locals) module.exports = content.locals;\n// Hot Module Replacement\nif(module.hot) {\n\t// When the styles change, update the <style> tags\n\tif(!content.locals) {\n\t\tmodule.hot.accept(\"!!./../../node_modules/css-loader/index.js!./../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./gift.vue\", function() {\n\t\t\tvar newContent = require(\"!!./../../node_modules/css-loader/index.js!./../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./gift.vue\");\n\t\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\t\t\tupdate(newContent);\n\t\t});\n\t}\n\t// When the module is disposed, remove the <style> tags\n\tmodule.hot.dispose(function() { update(); });\n}\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/style-loader!./~/css-loader!./~/vue-loader/lib/selector.js?type=style&index=0!./src/views/gift.vue\n ** module id = 84\n ** module chunks = 1\n **/","exports = module.exports = require(\"./../../node_modules/css-loader/lib/css-base.js\")();\n// imports\n\n\n// module\nexports.push([module.id, \".body {\\n        background: #fff;\\n    }\", \"\"]);\n\n// exports\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/css-loader!./~/vue-loader/lib/selector.js?type=style&index=0!./src/views/gift.vue\n ** module id = 85\n ** module chunks = 1\n **/","module.exports = \"<div>gift</div>\";\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./src/views/gift.vue\n ** module id = 87\n ** module chunks = 1\n **/"],"sourceRoot":""}


--------------------------------------------------------------------------------
/src/views/paged/paged.vue:
--------------------------------------------------------------------------------
  1 | 
  2 | <template>
  3 | 
  4 |     <div id="my">
  5 |         <div class="card_my">
  6 |             <div class="card list-block">
  7 |                 <div class="card-content">
  8 |                     <div class="card-content-inner">
  9 |                         <div class="row avatar_row">
 10 |                             <div class="col-50">
 11 |                                 <div class="row">
 12 |                                     <div class="col-50">
 13 |                                         <div class="avatar">
 14 |                                             <img style="border-radius: 100%;" />
 15 |                                         </div>
 16 |                                     </div>
 17 |                                     <div class="col-50">
 18 |                                         <div class="avatar_name">
 19 |                                             波多野结衣
 20 |                                         </div>
 21 |                                     </div>
 22 |                                 </div>
 23 | 
 24 |                             </div>
 25 |                             <div class="col-50">
 26 |                                 <div class="row">
 27 |                                     <div class="col-100">
 28 |                                         <span class="rule" id="rule">文本1</span>
 29 |                                         <div class="level_txt"><span>文本2</span></div>
 30 |                                     </div>
 31 |                                 </div>
 32 |                             </div>
 33 |                         </div>
 34 |                     </div>
 35 |                 </div>
 36 |             </div>
 37 |         </div>
 38 |         <div class="card_my_2">
 39 |             <div class="card list-block">
 40 |                 <div class="card-content">
 41 |                     <div class="card-content-inner">
 42 |                         <div class="row">
 43 |                             <div class="col-100">
 44 |                                 <p>文本3</p>
 45 |                             </div>
 46 |                         </div>
 47 |                     </div>
 48 |                 </div>
 49 |             </div>
 50 |         </div>
 51 | 
 52 |         <div class="list-block my-menu-1">
 53 |             <ul>
 54 |                 <li>
 55 |                     <a v-link="{ path: '/D/toonelevel'}" external class="item-link item-content">
 56 |                         <div class="item-media"><i class="icon icon-gift"></i></div>
 57 |                         <div class="item-inner">
 58 |                             <div class="item-title">演示路由跳转</div>
 59 |                         </div>
 60 |                     </a>
 61 |                 </li>
 62 |                 <li>
 63 |                     <a v-link="{ path: '/D/vfor'}" external class="item-link item-content">
 64 |                         <div class="item-media"><i class="icon icon-cart"></i></div>
 65 |                         <div class="item-inner">
 66 |                             <div class="item-title">演示v-for&子路由跳转</div>
 67 |                         </div>
 68 |                     </a>
 69 |                 </li>
 70 |             </ul>
 71 |         </div>
 72 | 
 73 |         <div class="list-block" >
 74 |             <ul>
 75 |                 <li>
 76 |                     <a v-link="{ path: '/D/vmodel'}" external class="item-link item-content">
 77 |                         <div class="item-media"><i class="icon icon-menu"></i></div>
 78 |                         <div class="item-inner">
 79 |                             <div class="item-title">演示v-model</div>
 80 |                         </div>
 81 |                     </a>
 82 |                 </li>
 83 |             </ul>
 84 |         </div>
 85 | 
 86 |     </div>
 87 |     <router-view>
 88 |     </router-view>
 89 | </template>
 90 | <script>
 91 |     module.exports = {
 92 |         data: function(){
 93 |             return {
 94 |             }
 95 |         },
 96 |         ready: function () {
 97 |             console.log("my-dom准备完毕") // -> 'foo'
 98 |         },
 99 |         methods:{
100 |         }
101 |     }
102 | </script>


--------------------------------------------------------------------------------
/src/views/detail.vue:
--------------------------------------------------------------------------------
 1 | <style>
 2 | </style>
 3 | 
 4 | <template>
 5 |     <div class="page page-current" >
 6 |         <div class="content detail_content">
 7 |             <div class="row no-gutter">
 8 |                 <div class="col-100 img_head">
 9 |                     <img class="gift-cover" src="{{gift.bigPic}}">
10 |                     <div class="gradients">
11 |                         <p id="merchant_name">{{gift.merchant_name}}</p>
12 |                         <p id="name">{{gift.name}}</p>
13 |                     </div>
14 |                 </div>
15 |             </div>
16 |             <div class="row no-gutter describe" v-bind:class="{fixTop:isFixDesc}">
17 |                 <div class="col-50 ">
18 |                     <span id="goods_count">{{gift.pre_count}}</span>
19 |                 </div>
20 |                 <div class="col-50 ">
21 |                     <a v-if="!isGet" href="javascript:void(0)" v-on:click="pay(gift.id)" class="btn-org">立即兑换</a>
22 |                     <div v-if="isGet" class="btn-gray">已兑换</div>
23 |                 </div>
24 |             </div>
25 |             <div class="main" id="main">
26 |                 <div v-html="gift.content"></div>
27 |             </div>
28 |             <div class="row no-gutter">
29 |                 <div class="col-100" style="background-color: #ffffff">
30 |                     <div class="border">
31 |                         <div class="declare">
32 |                             <p>重要说明</p>
33 |                             <div class="declare_cont" id="declare">
34 |                                 <div>商品兑换流程请仔细参照商品详情页的“兑换流程”、“注意事项”与“使用时间”，除商品本身不能正常兑换外，商品一经兑换，一律不退还积分。（如商品过期、兑换流程操作失误、仅限新用户兑换）</div>
35 |                                 <div>活动由提供，与设备生产商Apple Inc.公司无关</div></div>
36 |                         </div>
37 |                     </div>
38 |                 </div>
39 |             </div>
40 | 
41 | 
42 |         </div>
43 |     </div>
44 | 
45 | </template>
46 | 
47 | <script>
48 |     module.exports = {
49 |         data: function(){
50 |             return {
51 |                 gift : {
52 |                     id:"11073",
53 |                     name:"能量堡垒钙维D片",
54 |                     merchant_name:"乾乾",
55 |                     bigPic:"http://static.diditaxi.com.cn/op/imall_cms_image/20150928/20150928175804detail.jpg",//大图
56 |                     pre_count:"1000",
57 |                     content:"<p>商品简介：</p>"+
58 |                     "            <p>【纯天然紫水晶手链】 &nbsp;价值188元</p>"+
59 |                     "            <p>108颗佛珠手串6mm多圈多层男女款手链，配以藏银装饰，紫水晶在天然水晶石的功效与作用是很强大的，紫水晶被称为“幸运之石”，同时被认为是爱的守护石</p>"+
60 |                     "            <p><br /></p>"+
61 |                     "            <p>使用范围：</p>"+
62 |                     "            <p>全国<span style=\"color: rgb(227, 108, 9);\">（15元运费用户自理）</span></p>"+
63 |                     "            <p><br /></p>"+
64 |                     "            <p>使用有效期：</p>"+
65 |                     "            <p>兑换之日起至2015年10月31日有效</p>"+
66 |                     "            <p><br /></p>"+
67 |                     "            <p>兑换流程：</p>"+
68 |                     "            <p>1、兑换后获得【兑换码】，兑换码可在【兑换记录】中查询</p>"+
69 |                     "            <p>2、关注藏珺阁微信公众号【yu_cangjunge】或【藏珺阁】</p>"+
70 |                     "            <p>3、点击底部菜单——滴滴兑换或回复：水晶手链，点击回复链接进入商品页面</p>"+
71 |                     "            <p>4、点击【购买】——【使用优惠】——输入【兑换码】——即可免费领取该商品</p>"+
72 |                     "            <p>5、兑换成功后商家会在1-3个工作日内发货</p>"+
73 |                     "            <p><br /></p>"+
74 |                     "            <p>注意事项：</p>"+
75 |                     "            <p>1、每位用户仅限兑换一次</p>"+
76 |                     "            <p>2、每个订单只能使用一次</p>"+
77 |                     "            <p>3、客服电话：xxxxxxxx</p>"+
78 |                     "            <p>4、<span style=\"color: rgb(227, 108, 9);\">中秋期间、十一期间发货会慢1~3天，敬请理解</span></p>"
79 |                 },
80 |                 isGet:false,
81 |                 isFixDesc:false
82 |             }
83 |         },
84 |         methods:{
85 |             pay:function(){
86 |                 var ctx = this
87 |                 $.confirm('确定兑换吗?', function () {
88 |                     //    购买逻辑
89 |                     ctx.isGet = true;
90 |                     $.alert('兑换成功');
91 |                 });
92 |             },
93 |             _judgeFixTop:function(ele){
94 | //                在此处可以添加 滚动监测
95 |             }
96 |         }
97 |     }
98 | </script>
99 | 


--------------------------------------------------------------------------------
/src/views/paged/vmodel.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <!--v-model演示-->
  3 |     <div class="page page-current" transition="page" >
  4 |         <header class="bar bar-nav">
  5 |             <a class="button button-link button-nav pull-left back" v-link="{path:'/D'}">
  6 |                 <span class="icon icon-left"></span>
  7 |                 返回
  8 |             </a>
  9 |             <h1 class="title">v-model演示</h1>
 10 |         </header>
 11 |         <div class="content">
 12 |             <div v-for="record in records" class="card demo-card-header-pic"
 13 |                     @click="chooseAction($index,$event,this)">
 14 |                 {{checkDefault(record.isDefault,$index)}}
 15 |                 <div class="card-content">
 16 |                     <div v-show="record.isDefault" class="default_flag"></div>
 17 |                     <div class="card-content-inner">
 18 |                         <p>{{record.contact}} {{record.mobile}}</p>
 19 |                         <p class="color-gray">地址:{{record.city}},{{record.detail}}</p>
 20 |                     </div>
 21 |                 </div>
 22 |             </div>
 23 |         </div>
 24 |     </div></div>
 25 | </template>
 26 | <script>
 27 |     module.exports = {
 28 |         data: function(){
 29 |             return {
 30 |                 curDefaultIndex:"",
 31 |                 curIndex:"",
 32 |                 records:[
 33 |                     {id:1,contact:"董小姐",mobile:"18888888888",city:"北京市 海淀区",detail:"安河桥北",isDefault:true},
 34 |                     {id:2,contact:"懒先森",mobile:"18888888888",city:"黑龙江省 野垫子",detail:"村东头老槐树旁",isDefault:false},
 35 |                     {id:3,contact:"别删我",mobile:"18888888888",city:"北京市 朝阳区",detail:"优脱褲海天盛筵",isDefault:false}
 36 |                 ]
 37 |             }
 38 |         },
 39 |         methods:{
 40 |             chooseAction:function($index,$event,vm){
 41 |                 var actionBtns = [
 42 |                     {
 43 |                         text: '设置为默认',
 44 |                         bold:true,
 45 |                         color: 'default',
 46 |                         onClick:function(){
 47 |                             vm.setDefault($index,$event,vm);
 48 |                         }
 49 |                     },
 50 |                     {
 51 |                         text: '编辑',
 52 |                         bold: true,
 53 |                         color: 'edit',
 54 |                         onClick: function() {
 55 |                             vm.editAddr($index,$event,vm);
 56 |                         }
 57 |                     },
 58 |                     {
 59 |                         text: '删除',
 60 |                         color: 'danger',
 61 |                         onClick: function() {
 62 |                             vm.deleteAddr($index,$event,vm);
 63 |                         }
 64 |                     }
 65 |                 ];
 66 |                 $.actions(actionBtns);
 67 |             },
 68 |             checkDefault:function(isDefault,$index){
 69 |                 this.curIndex = $index;
 70 |                 if(isDefault)this.curDefaultIndex = $index;
 71 |             },
 72 |             setDefault:function($index,$event,vm){
 73 |                 vm.records[vm.curDefaultIndex].isDefault = false;
 74 |                 vm.records[$index].isDefault = true;
 75 |                 $.toast("操作成功");
 76 |             },
 77 |             updateAddr:function(id){
 78 |                 $.toast("操作成功");
 79 |                 $.closeModal(document.querySelector(".popup"));
 80 |             },
 81 |             deleteAddr:function($index,$event) {
 82 |                 var curChoose =$event.target;
 83 |                 while(curChoose.className.indexOf("card ")<0){
 84 |                     curChoose = curChoose.parentNode;
 85 |                 }
 86 |                 $(curChoose).remove();
 87 |             },
 88 |             //编辑地址
 89 |             editAddr:function($index,$event,ele){
 90 |                 var popupHTML = '<div class="popup popup-addr">'+
 91 |                         '<div class="content-block">'+
 92 |                         "<header class=\"bar bar-nav\">"+
 93 |                         "        <a class=\"button button-link button-nav pull-left close-popup\" href=\"javascript:void(0)\">"+
 94 |                         "            收起"+
 95 |                         "        </a>"+
 96 |                         "        <h1 class=\"title\">编辑我吧!</h1>"+
 97 |                         "    </header>"+
 98 |                         "<div class=\"list-block\">"+
 99 |                         "    <ul>"+
100 |                         "      <!-- Text inputs -->"+
101 |                         "      <li>"+
102 |                         "        <div class=\"item-content\">"+
103 |                         "          <div class=\"item-media\"><span class=\"icon icon-card\"></span></div>"+
104 |                         "          <div class=\"item-inner\">"+
105 |                         "            <div class=\"item-title label\">联系人</div>"+
106 |                         "            <div class=\"item-input\">"+
107 |                         "              <input type=\"text\" v-model=\"records[curIndex].contact\" placeholder=\"您的名字\">"+
108 |                         "            </div>"+
109 |                         "          </div>"+
110 |                         "        </div>"+
111 |                         "      </li>"+
112 |                         "      <li>"+
113 |                         "        <div class=\"item-content\">"+
114 |                         "          <div class=\"item-media\"><span class=\"icon icon-phone\"></span></div>"+
115 |                         "          <div class=\"item-inner\">"+
116 |                         "            <div class=\"item-title label\">联系电话</div>"+
117 |                         "            <div class=\"item-input\">"+
118 |                         "              <input type=\"text\" v-model=\"records[curIndex].mobile\" placeholder=\"手机号\">"+
119 |                         "            </div>"+
120 |                         "          </div>"+
121 |                         "        </div>"+
122 |                         "      </li>"+
123 |                         "      <li>"+
124 |                         "        <div class=\"item-content\">"+
125 |                         "          <div class=\"item-media\"><span class=\"icon icon-browser\"></span></div>"+
126 |                         "          <div class=\"item-inner\">"+
127 |                         "            <div class=\"item-title label\">省市区</div>"+
128 |                         "            <div class=\"item-input\">"+
129 |                         "              <input id=\"city-picker\" v-model=\"records[curIndex].city\" type=\"text\" placeholder=\"\">"+
130 |                         "            </div>"+
131 |                         "          </div>"+
132 |                         "        </div>"+
133 |                         "      </li>"+
134 |                         "      <li class=\"align-top\">"+
135 |                         "        <div class=\"item-content\">"+
136 |                         "          <div class=\"item-media\"><span class=\"icon icon-home\"></span></div>"+
137 |                         "          <div class=\"item-inner\">"+
138 |                         "            <div class=\"item-title label\">详细地址</div>"+
139 |                         "            <div class=\"item-input\">"+
140 |                         "              <textarea v-model=\"records[curIndex].detail\" placeholder=\"街道,门牌\"></textarea>"+
141 |                         "            </div>"+
142 |                         "          </div>"+
143 |                         "        </div>"+
144 |                         "      </li>"+
145 |                         "    </ul>"+
146 |                         "  </div>"+
147 |                         "  <div class=\"content-block\">"+
148 |                         "    <div class=\"row\">"+
149 |                         "      <div class=\"col-50\"><a href=\"javascript:void(0)\" class=\"button button-big button-fill button-danger close-popup\">取消</a></div>"+
150 |                         "      <div class=\"col-50\"><a @click=\"updateAddr(records[curIndex].id)\" class=\"button button-big button-fill button-success\">提交</a></div>"+
151 |                         "    </div>"+
152 |                         "  </div>"+
153 |                         '</div>'+
154 |                         '</div>'
155 |                 $.popup(popupHTML);
156 |                 this.$compile(document.querySelector(".popup-addr"));
157 |             }
158 |         }
159 |     }
160 | </script>


--------------------------------------------------------------------------------
/src/views/tab.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div  class="content">
  3 |         <div class="content-block task">
  4 |             <div class="buttons-tab">
  5 |                 <a href="#tab1" class="tab-link active button">A状态</a>
  6 |                 <a href="#tab2" class="tab-link button">B状态</a>
  7 |                 <a href="#tab3" class="tab-link button">C状态</a>
  8 |             </div>
  9 |             <div class="content-block">
 10 |                 <div class="tabs">
 11 |                     <!-- A-->
 12 |                     <div id="tab1" class="tab active">
 13 |                         <div class="content-block">
 14 |                             <div v-for="record in records" v-show="!record.isFinish&&record.isDraw" class="card">
 15 |                                 <div class="card-content task_isFinish">
 16 |                                     <div class="task_flag task_unfin"></div>
 17 |                                     <div class="card-content-inner">
 18 |                                         <div class="list-block">
 19 |                                             <ul>
 20 |                                                 <li>
 21 |                                                     <div class="item-content">
 22 |                                                         <div class="item-inner">
 23 |                                                             <div class="item-title">
 24 |                                                                 <span>{{record.title}}</span>
 25 |                                                             <span class="right_span">
 26 |                                                                 <a v-on:click="handleMission(record,$event)" external class="button">点我</a>
 27 |                                                             </span>
 28 |                                                             </div>
 29 |                                                         </div>
 30 |                                                     </div>
 31 |                                                 </li>
 32 |                                             </ul>
 33 |                                         </div>
 34 |                                     </div>
 35 |                                 </div>
 36 |                             </div>
 37 |                         </div>
 38 |                     </div>
 39 |                     <!-- B-->
 40 |                     <div id="tab2" class="tab">
 41 |                         <div class="content-block">
 42 |                             <div class="content-block">
 43 |                                 <div v-for="record in records" v-show="!record.isFinish&&!record.isDraw"  class="card">
 44 |                                     <div class="card-content">
 45 |                                         <div class="task_flag task_can"></div>
 46 |                                         <div class="card-content-inner">
 47 |                                             <div class="list-block">
 48 |                                                 <ul>
 49 |                                                     <li>
 50 |                                                         <div class="item-content">
 51 |                                                             <div class="item-inner">
 52 |                                                                 <div class="item-title">
 53 |                                                                     <span>{{record.title}}</span>
 54 |                                                             <span class="right_span">
 55 |                                                                 <a href="#" class="button button-danger">别点</a>
 56 |                                                             </span>
 57 |                                                                 </div>
 58 |                                                             </div>
 59 |                                                         </div>
 60 |                                                     </li>
 61 |                                                 </ul>
 62 |                                             </div>
 63 |                                         </div>
 64 |                                     </div>
 65 |                                 </div>
 66 |                             </div>
 67 |                         </div>
 68 |                     </div>
 69 |                     <!-- C-->
 70 |                     <div id="tab3" class="tab">
 71 |                         <div class="content-block">
 72 |                             <div class="content-block">
 73 |                                 <div v-for="record in records"  class="card">
 74 |                                     <div class="card-content">
 75 |                                         <div class="task_flag"
 76 |                                              v-bind:class="{'task_can':!record.isFinish&&!record.isDraw,'task_unfin':!record.isFinish&&record.isDraw,'task_fin':record.isFinish&&record.isDraw}">
 77 |                                         </div>
 78 |                                         <div class="card-content-inner">
 79 |                                             <div class="list-block">
 80 |                                                 <ul>
 81 |                                                     <li>
 82 |                                                         <div class="item-content">
 83 |                                                             <div class="item-inner">
 84 |                                                                 <div class="item-title">
 85 |                                                                     <span>{{record.title}}</span>
 86 |                                                             <span class="right_span">
 87 |                                                                 <a v-show="!record.isFinish&&record.isDraw" href="#" class="button">别点</a>
 88 |                                                                 <a v-show="!record.isFinish&&!record.isDraw" href="#" class="button button-danger">别点</a>
 89 |                                                             </span>
 90 |                                                                 </div>
 91 |                                                             </div>
 92 |                                                         </div>
 93 |                                                     </li>
 94 |                                                 </ul>
 95 |                                             </div>
 96 |                                         </div>
 97 |                                     </div>
 98 |                                 </div>
 99 |                             </div>
100 |                         </div>
101 |                     </div>
102 |                 </div>
103 |             </div>
104 |         </div>
105 |     </div>
106 | </template>
107 | 
108 | <script>
109 |     var missionDispatcher = {
110 |         sign:function(vm,data){
111 |             var modal = $.modal({
112 |                 afterText:'<div class="row">'+
113 |                 '    <div class="col-100">'+
114 |                 '        <div class="numtext" style="display: none;position: absolute;right: 22px;line-height: 42px;text-align: left;">'+
115 |                 '            <div class="row">'+
116 |                 '                <div class="col-100">看动画!</div>'+
117 |                 '            </div>'+
118 |                 '            <div class="row">'+
119 |                 '                <div class="col-100" style="width:100%">请继续鞭笞我</div>'+
120 |                 '            </div>'+
121 |                 '        </div>'+
122 |                 '        <div class="num_container">'+
123 |                 '            <div class="next num"><span>7</span></div>'+
124 |                 '            <div class="current num"><span>6</span></div>'+
125 |                 '        </div>'+
126 |                 '    </div>'+
127 |                 '</div>',
128 |                 buttons: [
129 |                     {
130 |                         text: '文本文本',
131 |                         bold: true,
132 |                         onClick: function () {
133 | //                            随便编点啥吧
134 |                         }
135 |                     },
136 |                 ]
137 |             })
138 |             var from_page = $(".current");
139 |             var next_page = $(".next");
140 |             from_page.addClass("flipover");
141 |             var events = ['webkitAnimationEnd', 'OAnimationEnd', 'MSAnimationEnd', 'animationend'];
142 |             for(var i=0;i<events.length;i++){
143 |                 from_page.on(events[i],function(){
144 |                     from_page.remove();
145 |                     next_page.addClass("translateToLeft");
146 |                 });
147 |                 next_page.on(events[i],function(){
148 |                     $(".numtext").show().addClass("sloganFadeUp");
149 |                 });
150 |             }
151 |             data.isFinish = true;
152 |         }
153 |     }
154 |     module.exports = {
155 |         data: function(){
156 |             return {
157 |                 records:[
158 |                     {title:"任务1",isFinish:false,isDraw:true,type:"sign"},
159 |                     {title:"任务2",isFinish:true,isDraw:true,type:"info"},
160 |                     {title:"任务3",isFinish:false,isDraw:false,type:"info"},
161 |                     {title:"任务4",isFinish:false,isDraw:false,type:"change"}
162 |                 ]
163 |             }
164 |         },
165 |         ready: function () {
166 |             console.log("record-dom准备完毕") // -> 'foo'
167 |         },
168 |         methods:{
169 |             handleMission:function(data,$event){
170 |                 missionDispatcher[data.type].call(this,this,data);
171 |             }
172 |         }
173 |     }
174 | </script>


--------------------------------------------------------------------------------
/static/styles/mall.css:
--------------------------------------------------------------------------------
  1 | img {
  2 |   display: block;
  3 | }
  4 | .card_my {
  5 |   /*height:4rem;*/
  6 |   background-color:#515CE9;
  7 | }
  8 | .card_my .card{
  9 |   margin: 0px!important;
 10 | }
 11 | .card_my .card-content-inner {
 12 |   padding: 0 .75rem!important;
 13 | }
 14 | .card_my .card-content-inner p{
 15 |   margin: 0px !important;
 16 | }
 17 | #my {
 18 |   /*margin: 0px!important;*/
 19 |   height: 100%;
 20 |   background-color: #ffffff;
 21 | }
 22 | .list-item__left,
 23 | .list-item__right {
 24 |   height:8rem;
 25 |   background-color:#FFF;
 26 |   border-bottom: 1px #f0f0f0 solid;
 27 | }
 28 | .list-item__left {
 29 |   border-right: 1px #f0f0f0 solid;
 30 |   -webkit-box-sizing: border-box;
 31 | }
 32 | 
 33 | .state_grey {
 34 |   background-color: #ccc;
 35 | }
 36 | .state_org {
 37 |   background-color: #515CE9;
 38 | }
 39 | .state {
 40 |   display: inline-block;
 41 |   height: 14px;
 42 |   line-height: 14px;
 43 |   padding: 0 3px;
 44 |   color: #fff;
 45 |   border-radius: 2px;
 46 |   font-size: .6rem;
 47 | }
 48 | .list-item__info {
 49 |   margin-bottom:0px;
 50 | }
 51 | .list-item__info p {
 52 |   height: 16px;
 53 |   line-height: 16px;
 54 |   white-space: nowrap;
 55 |   overflow: hidden;
 56 |   text-overflow: ellipsis;
 57 |   margin:.2rem 0px;
 58 |   font-family: STHeiTi-Light,'Microsoft YaHei',arial,sans-serif,'Droid Sans Fallback';
 59 | }
 60 | .per_count {
 61 |   display: inline-block;
 62 |   width: 11px;
 63 |   height: 10px;
 64 |   background: url(http://static.xiaojukeji.com/activity/img-mall/per_count.png) right bottom no-repeat;
 65 |   background-size: 8px 10px;
 66 |   position: relative;
 67 |   top: 1px;
 68 | }
 69 | .list-item__info p:nth-child(3) {
 70 |   color: #515CE9;
 71 |   font-size: .6rem;
 72 | }
 73 | .list-item__info p:nth-child(2) {
 74 |   font-size: .75rem;
 75 |   color: #666;
 76 | }
 77 | .list-item__info p:nth-child(1)  {
 78 |   color: #989898;
 79 |   font-size: .6rem;
 80 | }
 81 | .mod_img {
 82 |   width: 110px;
 83 |   height: 75px;
 84 |   margin: auto;
 85 |   overflow: hidden;
 86 |   padding: 4.5px 0;
 87 | }
 88 | .address-phone__contents {
 89 |   font-size:.7rem;
 90 | }
 91 | .circle_box {
 92 |   width: 100%;
 93 |   /* height: 158px; */
 94 |   text-align: center;
 95 |   /* padding-top: 20px; */
 96 |   /* position: fixed; */
 97 |   left: 0;
 98 |   top: 0;
 99 |   background-color: #fff;
100 |   /* z-index: 100; */
101 | }
102 | 
103 | .circle_top {
104 |   width: 100%;
105 | }
106 | 
107 | .circle {
108 |   width: 80px;
109 |   height: 80px;
110 |   display: inline-block;
111 |   border-radius: 51px;
112 |   border: 1px solid #515CE9;
113 |   background-clip: padding-box;
114 |   background-color: #515CE9;
115 |   color: #fff;
116 |   position: relative;
117 |   -webkit-animation: bounceIn .5s .1s ease both;
118 |   top: 10px;
119 | }
120 | 
121 | @-webkit-keyframes bounceIn {
122 |   0% {
123 |     opacity: 0;
124 |     -webkit-transform: scale(.3)
125 |   }
126 | 
127 |   50% {
128 |     opacity: 1;
129 |     -webkit-transform: scale(1.05)
130 |   }
131 | 
132 |   70% {
133 |     -webkit-transform: scale(.9)
134 |   }
135 | 
136 |   100% {
137 |     -webkit-transform: scale(1)
138 |   }
139 | }
140 | 
141 | .text_box {
142 |   width: 100%;
143 |   height: 48px;
144 |   position: absolute;
145 |   top: 50%;
146 |   margin-top: -24px
147 | }
148 | 
149 | .text_box .text {
150 |   font-size: 16px;
151 |   margin: 0px!important;
152 | }
153 | 
154 | .count {
155 |   font-size: 16px;
156 |   margin: 0px;
157 | }
158 | 
159 | .rule {
160 |   display: inline-block;
161 |   width: 65px;
162 |   height: 40px;
163 |   line-height: 40px;
164 |   background: url(http://static.xiaojukeji.com/activity/img-mall/my_count.png) left center no-repeat;
165 |   background-size: 14px 14px;
166 |   position: fixed;
167 |   top: 2px;
168 |   right: 0;
169 |   z-index: 200;
170 |   padding-left: 17px;
171 |   color: #878787;
172 |   font-size: 1.2rem
173 | }
174 | 
175 | .select {
176 |   padding-top: 10px
177 | }
178 | 
179 | .select a {
180 |   margin: 0 10px;
181 |   border-radius: 4px;
182 |   border: 1px solid #f0f0f0;
183 |   display: inline-block;
184 |   color: #878787;
185 |   font-size: 0.75rem;
186 |   position: relative;
187 |   z-index: 200
188 | }
189 | 
190 | .select span {
191 |   width: 93px;
192 |   height: 30px;
193 |   line-height: 30px;
194 |   display: inline-block;
195 |   background-size: 11px 10px;
196 |   padding-left: -4px;
197 |   text-align: center;
198 |   position: relative;
199 |   left: 10px
200 | }
201 | 
202 | .shop {
203 |   background: url(http://static.xiaojukeji.com/activity/img-mall/shop.png) 4px center no-repeat
204 | }
205 | .help {
206 |   background: url(http://static.xiaojukeji.com/activity/img-mall/my_count.png) 4px center no-repeat
207 | }
208 | 
209 | .record {
210 |   background: url(http://static.xiaojukeji.com/activity/img-mall/my_record2.png) 4px center no-repeat
211 | }
212 | 
213 | .area {
214 |   height: 27px;
215 |   padding-top: 12px;
216 |   background-color: #fff;
217 | }
218 | 
219 | .line {
220 |   width: 90%;
221 |   height: 4px;
222 |   border-bottom: 1px #e6e6e6 solid;
223 |   text-align: center;
224 |   margin: 0 auto
225 | }
226 | 
227 | .line span {
228 |   width: 77px;
229 |   height: 11px;
230 |   line-height: 20px;
231 |   display: inline-block;
232 |   background: #fff;
233 |   color: #ccc;
234 |   font-size: 16px;
235 |   position: relative;
236 |   top: -10px;
237 | }
238 | 
239 | .opacity {
240 |   height: 10px;
241 |   background: url(http://static.diditaxi.com.cn/activity/img-mall/opacity.png) left center no-repeat
242 | }
243 | 
244 | 
245 | .list {
246 |   width: 100%;
247 |   margin: 0 auto;
248 |   overflow-y: auto;
249 |   -webkit-overflow-scrolling: touch;
250 |   overflow: hidden;
251 |   background-color: #fff;
252 |   /*padding: 183px 5% 0*/;
253 |   padding: 0px 15px 0px 15px !important;
254 | }
255 | 
256 | .list li {
257 |   display: -webkit-box;
258 |   /*height: 56px;*/
259 |   border-bottom: 1px #ebebeb solid
260 | }
261 | 
262 | .list li div {
263 |   -webkit-box-flex: 2
264 | }
265 | .list li:last-child {
266 |   border-bottom: 0px;
267 | }
268 | 
269 | .list li h3 {
270 |   color: #666;
271 |   font-size: 0.75rem;
272 |   height: 32px;
273 |   line-height: 32px;
274 |   /*padding-top: 7px;*/
275 |   font-weight: 400;
276 |   margin: 0px !important;
277 |   padding-top: 7px!important;
278 | }
279 | 
280 | .list li p {
281 |   color: #999;
282 |   font-size: 0.5rem;
283 |   margin: 0px!important;
284 | }
285 | 
286 | .pre_count {
287 |   text-align: right;
288 |   line-height: 56px;
289 |   color: #515CE9;
290 |   /*font-size: 1.4rem*/
291 | }
292 | 
293 | .pre_green {
294 |   color: #52b786
295 | }
296 | 
297 | .btn-orange {
298 |   cursor: default;
299 |   display: inline-block;
300 |   width: 100%;
301 |   height: 41px;
302 |   line-height: 41px;
303 |   border-radius: 5px;
304 |   background-color: #515CE9;
305 |   color: #fff;
306 |   font-size: 1.6rem;
307 |   font-weight: 600;
308 |   text-decoration: none
309 | }
310 | 
311 | .btn-white {
312 |   cursor: default;
313 |   display: inline-block;
314 |   width: 100%;
315 |   height: 41px;
316 |   line-height: 41px;
317 |   border-radius: 5px;
318 |   background-color: #fefefe;
319 |   border: .1rem solid #d7d7d7;
320 |   color: #666;
321 |   font-size: 1.6rem;
322 |   font-weight: 600;
323 |   text-decoration: none
324 | }
325 | 
326 | .btn-orange:active {
327 |   background-color: #df7800
328 | }
329 | 
330 | .btn-white:active {
331 |   background-color: #e9e9e9
332 | }
333 | 
334 | .foo_opacity {
335 |   background-color: #fff
336 | }
337 | .my-menu-1{
338 |   margin:0px!important;
339 | }
340 | .logo-line{
341 | 
342 | }
343 | .logo-line img{
344 |   width: 56px;
345 |   height: 56px;
346 | }
347 | .logo-line #level-head {
348 |   width: 80px;
349 |   height: 80px;
350 | }
351 | .logo-line span{
352 |   line-height: 38px;
353 | }
354 | 
355 | .logo-line .score{
356 |   color: #fd306b;
357 |   font-weight: bolder;
358 |   font-size: 20px;
359 | }
360 | 
361 | .personalinfo {
362 |   overflow:initial;
363 | }
364 | 
365 | .personalinfo .list-block{
366 |   margin:0px!important;
367 | }
368 | .task {
369 |   padding: 0px !important;
370 |   margin: 0px!important;
371 | }
372 | .task .tab .content-block {
373 |   padding: 0px !important;
374 |   margin: 0px!important;
375 | }
376 | /*任务状态表示框*/
377 | .task_flag,.default_flag {
378 |   position: absolute;
379 |   width: 10px;
380 |   height: 100%;
381 | }
382 | /*红色-未完成*/
383 | .task_unfin,.default_flag {
384 |   background-color: #515CE9;
385 | }
386 | 
387 | /*绿色-完成*/
388 | .task_fin {
389 |   background-color: #60d948;
390 | }
391 | 
392 | /*蓝色-可领取*/
393 | .task_can {
394 |   background-color: #688fd9;
395 | }
396 | #my-coupon .card-content-inner {
397 |   padding: 0.2rem 0 0.3rem 0.8rem !important;
398 | }
399 | #my-coupon .card-content-inner p {
400 |   margin:0px !important;
401 | }
402 | #my-address .content-block-title {
403 |   margin: 0.75rem 0.75rem .5rem!important;
404 | }
405 | #my-change .list-block .item-text {
406 |   height: auto!important;
407 | }
408 | #gift-detail .content {
409 |   background-color: #fff!important;
410 | }
411 | /*复写部分-sm样式*/
412 | .color-default {
413 |   color: #4cd964!important;
414 | }
415 | .color-edit {
416 |   color: #688fd9!important;
417 | }
418 | 
419 | /*复写部分-end*/
420 | 
421 | 
422 | .gift-cover {
423 |   width: 100%!important;
424 | }
425 | 
426 | .describe {
427 |   width: 100%;
428 |   height: 54px;
429 |   line-height: 54px;
430 |   font-size: 1.4rem;
431 |   background-color: rgba(255,255,255,.9);
432 |   border-bottom: 1px solid #ebebeb;
433 |   border-top: 1px solid #ebebeb;
434 | }
435 | 
436 | .describe h3 {
437 |   padding-left: 4%;
438 |   float: right;
439 |   color: #333;
440 |   font-weight: 400
441 | }
442 | 
443 | .describe span:nth-child(1) {
444 |   background: url(http://static.xiaojukeji.com/activity/img-mall/detail_count.png) right 28px no-repeat;
445 |   background-size: 8px 9.5px;
446 |   float: left;
447 |   color: #515CE9;
448 |   margin-left: 5%;
449 |   margin-right: 4px;
450 |   padding-right: 10px;
451 |   /*font-size: 3rem*/
452 | }
453 | .btn-org {
454 |   width: 65%;
455 |   display: inline-block;
456 |   text-align: center;
457 |   cursor: default;
458 |   height: 34px;
459 |   line-height: 34px;
460 |   border-radius: 5px;
461 |   color: #fff!important;
462 |   font-size: 1.1rem;
463 |   text-decoration: none;
464 |   margin: 10px 6% 10px auto;
465 |   -webkit-tap-highlight-color: rgba(0,0,0,.2);
466 |   background-color: #515CE9;
467 |   float: right
468 | }
469 | .btn-gray {
470 |   width: 65%;
471 |   display: inline-block;
472 |   text-align: center;
473 |   cursor: default;
474 |   height: 34px;
475 |   line-height: 34px;
476 |   border-radius: 5px;
477 |   color: #fff!important;
478 |   font-size: 1.1rem;
479 |   text-decoration: none;
480 |   margin: 10px 6% 10px auto;
481 |   -webkit-tap-highlight-color: rgba(0,0,0,.2);
482 |   background-color: #e0e0e0;
483 |   float: right
484 | }
485 | .main {
486 |   background-color: #fff;
487 |   padding: 0 4% 0;
488 |   word-wrap: break-word;
489 |   -webkit-user-select: auto;
490 |   border: 0px;
491 | }
492 | 
493 | .main div,a,b,canvas,dd,dl,dt,em,form,h1,h2,h3,h4,h5,h6,hr,img,input,label,li,ol,p,q,span,ul {
494 |   -webkit-user-select: text
495 | }
496 | 
497 | .main p img {
498 |   width: 100%
499 | }
500 | .main p {
501 |   margin: 0!important;
502 |   font-size: 0.75rem!important;
503 |   color: #000;
504 | }
505 | 
506 | .popup-rank .content-block {
507 |   margin:2.5rem 0 !important;
508 |   padding: 0px !important;
509 | }
510 | .popup-rank .content-block .item-title,.task .item-title {
511 |   width: 100%!important;
512 |   overflow: visible!important;
513 | }
514 | .popup-rank .content-block .item-title .right_span, .task .item-title .right_span{
515 |   position: absolute;
516 |   right: 0px;
517 |   font-size: 0.745rem;
518 | }
519 | .task .button-danger {
520 |   color: #688fd9!important;
521 |   border-color: #688fd9!important;
522 | }
523 | .content_count {
524 |   color: #ccc;
525 |   background: url(http://static.xiaojukeji.com/activity/img-mall/per_count.png) right center no-repeat;
526 |   background-size: 8px 10px;
527 |   padding-right: 10px;
528 |   padding-left: 10px;
529 | }
530 | .font_little {
531 |   color: #666;
532 |   font-size:0.75rem;
533 | }
534 | .orange {
535 |   color: #515CE9;
536 |   font-weight: 400;
537 | }
538 | .expire {
539 |   font-size: 0.5rem;
540 | }
541 | .fixTop {
542 |   position: fixed;
543 |   top:0;
544 | }
545 | .img_head {
546 |   position: relative;
547 | }
548 | .gradients {
549 |   width: 100%;
550 |   height: 80px;
551 |   background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.5)));
552 |   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BDD738, endColorstr=#7E9516);
553 |   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#BDD738,endColorstr=#7E9516)";
554 |   position: absolute;
555 |   bottom: 0
556 | }
557 | 
558 | .gradients p {
559 |   color: #fff;
560 |   padding-left: 4%
561 | }
562 | 
563 | .gradients p:nth-child(1) {
564 |   font-size: 0.75rem;
565 |   position: absolute;
566 |   bottom: 25px;
567 |   margin: 0px!important;
568 | }
569 | 
570 | .gradients p:nth-child(2) {
571 |   font-size: 1rem;
572 |   position: absolute;
573 |   bottom: 0px;
574 |   margin: 0px!important;
575 | }
576 | .border {
577 |   border-bottom: 1px solid #fff;
578 |   word-break: break-all
579 | }
580 | 
581 | .declare {
582 |   text-align: center;
583 |   width: 92%;
584 |   border: 1px dashed #999;
585 |   border-radius: 5px;
586 |   margin: 18px 3% 20px;
587 |   position: relative
588 | }
589 | 
590 | .declare p {
591 |   font-size: 0.75rem;
592 |   color: #333;
593 |   position: absolute;
594 |   top: -26px;
595 |   left: 47%;
596 |   margin-left: -35px;
597 |   padding: 0 12px;
598 |   background-color: #fff;
599 | }
600 | 
601 | .declare_cont {
602 |   text-align: left;
603 |   font-size: 0.5rem;
604 |   color: #666;
605 |   line-height: 18px
606 | }
607 | 
608 | .declare_cont div:nth-child(1) {
609 |   padding: 18px 7% 10px
610 | }
611 | 
612 | .declare_cont div:nth-child(2) {
613 |   border-top: 1px dashed #999;
614 |   padding: 10px 7%
615 | }
616 | .num_container {
617 |   position: relative;
618 |   width: 80px;
619 |   height: 80px;
620 |   margin: 0 auto;
621 | }
622 | .num {
623 |   width: 80px;
624 |   height: 80px;
625 |   font-size: 60px;
626 |   font-weight: 600;
627 |   position: absolute;
628 |   background-color: #515CE9;
629 |   line-height: 80px;
630 |   text-align: center;
631 |   border-radius: 10px;
632 |   color: #fff;
633 | }
634 | 
635 | .flipover {
636 |   animation: flipover-top 0.5s ease-in 0.5s 1 alternate;
637 |   animation-fill-mode: forwards;
638 | }
639 | 
640 | @-webkit-keyframes flipover-top {
641 |   0% {
642 |     -webkit-transform: rotateX(0deg);
643 |   }
644 |   50% {
645 |     /*height: 12px;*/
646 |     -webkit-transform: rotateX(90deg);
647 |   }
648 |   100% {
649 |     opacity: 0;
650 |     -webkit-transform: rotateX(90deg);
651 |   }
652 | }
653 | 
654 | .translateToLeft {
655 |   animation: toLeft 0.3s ease-in 0s 1 alternate;
656 |   animation-fill-mode: forwards;
657 | }
658 | 
659 | @-webkit-keyframes toLeft {
660 |   0% {
661 |     -webkit-transform: translateX(0px);
662 |   }
663 |   100% {
664 |     -webkit-transform: translateX(-80px);
665 |   }
666 | }
667 | 
668 | 
669 | /*淡进-从下到上*/
670 | @-webkit-keyframes fadeUp {
671 |   0% {
672 |     -webkit-transform: translate(0, -40px);
673 |     opacity: 0
674 |   }
675 |   100% {
676 |     -webkit-transform: translate(0px, 0);
677 |     opacity: 1
678 |   }
679 | }
680 | .sloganFadeUp {
681 |   -webkit-animation: fadeUp 0.2s linear both 0.1s;
682 | }
683 | 
684 | .grid-item {
685 |   text-align: center;
686 |   height: 80px;
687 |   line-height: 80px;
688 |   border-right: 1px solid #e6e6e6;
689 |   border-bottom: 1px solid #e6e6e6;
690 | }
691 | 
692 | .avatar img {
693 |   width: 56px;
694 |   height: 56px;
695 |   border-radius: 100%;
696 |   border: 1px solid #fff;
697 | }
698 | .avatar_name {
699 |   color: #ffffff;
700 |   line-height: 56px;
701 | }
702 | .card_my .card-content {
703 |   background-color: #515CE9;
704 | }
705 | .rule {
706 |   display: inline-block;
707 |   width: 70px;
708 |   height: 40px;
709 |   line-height: 40px!important;
710 |   background: url(http://static.xiaojukeji.com/activity/img-mall/per_count.png) left center no-repeat;
711 |   background-size: 14px 14px;
712 |   margin-right: 10px;
713 |   color: #ffffff;
714 |   font-size: 10px;
715 | 
716 |   /*position: relative;*/
717 |   /*/!* display: inline-block; *!/*/
718 |   /*/!* width: 65px; *!/*/
719 |   /*/!* height: 40px; *!/*/
720 |   /*/!* line-height: 40px!important; *!/*/
721 |   /*background: url(http://static.xiaojukeji.com/activity/img-mall/my_count.png) left center no-repeat;*/
722 |   /*background-size: 14px 14px;*/
723 |   /*margin-right: 10px;*/
724 |   /*color: #ffffff;*/
725 |   /*font-size: 10px;*/
726 |   /*top: -12px;*/
727 | }
728 | .avatar_row {
729 |   padding: 10px 0px 10px 0px;
730 | }
731 | 
732 | .level_txt {
733 |   /* line-height: 56px; */
734 |   text-align: center;
735 |   /* right: 0px; */
736 |   width: 30%;
737 |   /* opacity: 0.2; */
738 |   background-color: rgba(236, 127, 153, 0.52);
739 |   border-radius: 10px 0px 0px 10px;
740 |   position: absolute;
741 |   right: 0px;
742 |   top: 45px;
743 |   color: #ffffff;
744 | }
745 | .card_my_2 .card{
746 |   margin: 0px!important;
747 | }
748 | .card_my_2 .card-content-inner {
749 |   padding: 0 .75rem!important;
750 | }
751 | .card_my_2 .card-content{
752 |   background-color: rgba(233, 83, 119, 0.5);
753 | }
754 | 
755 | .card_my_2 .card-content-inner p{
756 |   margin: 0px !important;
757 | }
758 | .card_my_2 {
759 |   /*margin-top: 1px;*/
760 |   text-align: center;
761 |   color: #FFFBFB;
762 | }


--------------------------------------------------------------------------------