css rule add alertTip flex

Author: fanny

package-lock.json

@@ -52,7 +52,7 @@
     "html-webpack-plugin": "^2.30.1",
     "http-proxy-middleware": "^0.18.0",
     "node-notifier": "^5.1.2",
-    "node-sass": "^4.9.0",
+    "node-sass": "^4.9.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",

package.json

@@ -21,7 +21,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './style/common';
+@import './style/common.scss'; // reset 和 公共的css
 .router-fade-enter-active, .router-fade-leave-active {
   transition: opacity .3s;
 }

src/App.vue

@@ -38,4 +38,44 @@ Boolean，是指在DOM树中，注册了该listener的元素，是否会先于
 当一个元素嵌套了另一个元素，两个元素都对同一个事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。
 事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看 事件流 及 JavaScript Event order 文档。 如果没有指定， useCapture 默认为 false 。
 
-TODO svg换成iconfont 让小艾做一套
+###  flex布局  https://blog.csdn.net/baiding1123/article/details/47663217
+
+### css书写顺序  
+3.3 属性书写顺序
+[建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。
+解释：
+
+Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
+Box Model 相关属性包括：border / margin / padding / width / height 等
+Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
+Visual 相关属性包括：background / color / transition / list-style 等
+另外，如果包含 content 属性，应放在最前面。
+
+示例：
+
+.sidebar {
+    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
+    position: absolute;
+    top: 50px;
+    left: 0;
+    overflow-x: hidden;
+
+    /* box model: sizes / margins / paddings / borders / ...  */
+    width: 200px;
+    padding: 5px;
+    border: 1px solid #ddd;
+
+    /* typographic: font / aligns / text styles / ... */
+    font-size: 14px;
+    line-height: 20px;
+
+    /* visual: colors / shadows / gradients / ... */
+    background: #f5f5f5;
+    color: #333;
+    -webkit-transition: color 1s;
+       -moz-transition: color 1s;
+            transition: color 1s;
+}
+
+
+### setTimeout    setInterval   es6箭头函数不改变this指向

src/NOTE.txt

@@ -2,15 +2,22 @@
 ***  vue项目初始化           32b85057ab3eeaee10446d4727f165c9da1d5f46   
 ***  css初始化 结构目录创建   03d02d43f7825424569c1b1b638255565026ca4e 
 ***  移动端适配 路由懒加载 css书写方案  2498ba9725608131d7cc2eadea09daba108ce104
+
 ***  安装依赖 完成首页 
 npm i vuex showdown iscroll fastclick better-scroll axios -S
 npm i node-sass sass-loader http-proxy-middleware -D
+
 5f18534dcb413eb2714da0f95e8ea4869ef489c4
 ***  引入mint-ui vue-light-swiper vue-awesome-swiper 写一个test页（mint-ui暂时放在生产依赖）
+
  8e4ab7f5efaf0ad116d614a9ec71a4e6d9b09e87
 ***  封装axios 超时重新请求 添加svg的icon  
 note: https://github.com/KokoTa/Vue2-transition 路由切换动画
+
 d5c6d2bf873068e96234181d1afc507fce71a19a
-***  引入store 改写了请求方式 完成首页和登录页
+***  引入store 改写了请求方式 完成首页
+
 6f37a2e017ae903142b25db9a9e67b06e5138412
-*** 增加一个scroll事件的监听
+*** 增加一个scroll事件的监听test.vue
+
+*** 完成通用组件 

src/commitDetail.txt

@@ -0,0 +1,26 @@
+<template>
+  <div class="alert_tip">
+    <div class="alert_overlay"></div>
+    <section class="tip_text_container">
+      <div class="tip_icon">
+        <span></span><span></span>
+      </div>
+      <p class="tip_text">{{alertText}}</p>
+      <div class="tip_confirm" @click="closeTip">确认</div>
+    </section>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['alertText'],
+    methods: {
+      closeTip () {
+        this.$emit('closeTip')
+      }
+    }
+  }
+</script>
+<style lang="scss">
+@import '../../style/alertTip.scss';
+</style>

src/components/common/alertTip.vue

@@ -0,0 +1,31 @@
+ <template>
+  <div class="loading_container">
+    <div class="load_img" :style="{ backgroundPositionY: -(positionY % 7) * 2.5 + 'rem' }">
+    </div>
+    <svg class="load_ellipse" xmlns="http://www.w3.org/2000/svg" version="1.1">
+      <ellipse cx="26" cy="10" rx="26" ry="10" style="fill:#ddd;stroke:none;"></ellipse>
+    </svg>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        positionY: 0,
+        timer: null
+      }
+    },
+    mounted () {
+      this.timer = setInterval(() => {
+        this.positionY ++
+      }, 600)
+    },
+    beforeDestory () {
+      clearInterval(this.timer)
+    }
+  }
+</script>
+<style lang="scss">
+@import '../../style/loading.scss';
+</style>

src/components/common/loading.vue

@@ -1,5 +1,5 @@
 <template>
-  <header id='head_top'>
+  <header class='head_top'>
     <slot name='logo'></slot>
     <slot name='search'></slot>
     <section class="head_goback" v-if="goBack" @click="$router.go(-1)">
@@ -52,42 +52,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    @import '../../style/mixin';
-    #head_top{
-      background-color: $blue;
-      position: fixed;
-      z-index: 100;
-      left: 0;
-      top: 0;
-      @include wh(100%, 1.95rem);
-    }
-    .head_goback{
-      left: 0.4rem;
-      @include wh(0.6rem, 1rem);
-      line-height: 2.2rem;
-      margin-left: .4rem;
-    }
-    .head_login{
-      right: 0.55rem;
-      @include sc(0.65rem, #fff);
-      @include ct;
-      .login_span{
-        color: #fff;
-      }
-      .user_avatar{
-        fill: #fff;
-        @include wh(.8rem, .8rem);
-      }
-    }
-    .title_head{
-      @include center;
-      width: 50%;
-      color: #fff;
-      text-align: center;
-      .title_text{
-        @include sc(0.8rem, #fff);
-        text-align: center;
-        font-weight: bold;
-      }
-    }
+    @import '../../style/head.scss';
 </style>

src/components/header/head.vue

@@ -3,7 +3,6 @@
     <head-top signin-up='home'>
       <span slot='logo' class="head_logo"  @click="reload">ele.me</span>
     </head-top>
-    <button style="margin-top:100px" @click="goTest">去测试页面</button>
   </div>
 </template>
 <script>
@@ -54,12 +53,13 @@ export default {
     },
     // 点击图标刷新页面
     reload () {
-      // window.location 只读属性，返回一个 Location对象Location.reload() 方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面
+      // window.location 只读属性，返回一个 Location对象Location.reload() 方法用来刷新当前页面。该方法只有一个参数，
+      // 当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面
       window.location.reload()
-    },
-    goTest () {
-      this.$router.push('./test')
     }
   }
 }
 </script>
+<style lang="scss">
+@import '../../style/home.scss'
+</style>

src/images/activity.png

@@ -0,0 +1,72 @@
+@import './mixin.scss';
+@keyframes tipMove {
+    0% {transform: scale(1)}
+    35% {transform: scale(.8)}
+    70% {transform: scale(1.1)}
+    100% {transform: scale(1)}
+}
+.alert_tip {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 200;
+    .alert_overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 199;
+        opacity: 0.5;
+    }
+    .tip_text_container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        border: 1px;
+        border-radius: .25rem;
+        padding-top: .6rem;
+        margin-top: -6rem;
+        margin-left: -6rem;
+        width: 12rem;
+        animation: tipMove .4s;
+        background-color: rgba(255,255,255,1);
+        .tip_icon {
+            span:nth-of-type(1){
+                @include wh(.12rem, 1.5rem);
+                background-color: $tip_icon;
+            }
+            span:nth-of-type(2){
+                @include wh(.2rem, .2rem);
+                border: 1px;
+                border-radius: 50%;
+                margin-top: .2rem;
+                background-color: $tip_icon;
+            }
+        }
+        .tip_text {
+            margin-top: .8rem;
+            padding: 0 .4rem;
+            text-align: center;
+            line-height: .9rem;
+            @include sc(.7rem, $tip_text);
+        }
+        .tip_confirm {
+            border: 1px;
+            border-bottom-left-radius: .25rem;
+            border-bottom-right-radius: .25rem;
+            margin-top: .8rem;
+            width: 100%;
+            text-align: center;
+            line-height: 1.8rem;
+            background-color: $tip_confirm;
+        }
+    }
+}
+

src/images/add_address.png

@@ -69,10 +69,6 @@ html,body{
     background-size: 100% 100%;
 }
 
-.margin{
-    margin: 0 auto;
-}
-
 .left{
     float: left;
 }