Merge branch 'dev' of ssh://gitlab.bigaka.net:2287/Caden/common-templete into dev

# Conflicts:
#	src/main.js

config/index.js

@@ -6,7 +6,6 @@ const path = require('path')
 
 module.exports = {
   dev: {
-
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
@@ -15,7 +14,7 @@ module.exports = {
     // Various Dev Server settings
     host: 'localhost', // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-    autoOpenBrowser: false,
+    autoOpenBrowser: true,
     errorOverlay: true,
     notifyOnErrors: true,
     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
@@ -40,7 +39,7 @@ module.exports = {
     // https://vue-loader.vuejs.org/en/options.html#cachebusting
     cacheBusting: true,
 
-    cssSourceMap: true
+    cssSourceMap: true,
   },
 
   build: {
@@ -71,6 +70,6 @@ module.exports = {
     // View the bundle analyzer report after build finishes:
     // `npm run build --report`
     // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report
-  }
+    bundleAnalyzerReport: process.env.npm_config_report,
+  },
 }

package-lock.json

@@ -2994,6 +2994,14 @@
         "stream-shift": "^1.0.0"
       }
     },
+    "echarts": {
+      "version": "4.2.0-rc.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.2.0-rc.2.tgz",
+      "integrity": "sha512-5Y4Kyi4eNsRM9Cnl7Q8C6PFVjznBJv1VIiMm/VSQ9zyqeo+ce1695GqUd9v4zfVx+Ow1gnwMJX67h0FNvarScw==",
+      "requires": {
+        "zrender": "4.0.5"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -4234,14 +4242,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4256,20 +4262,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4386,8 +4389,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4399,7 +4401,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4414,7 +4415,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4422,14 +4422,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4448,7 +4446,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4529,8 +4526,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4542,7 +4538,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4664,7 +4659,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -11903,6 +11897,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.0.5.tgz",
+      "integrity": "sha512-SintgipGEJPT9Sz2ABRoE4ZD7Yzy7oR7j7KP6H+C9FlbHWnLUfGVK7E8UV27pGwlxAMB0EsnrqhXx5XjAfv/KA=="
     }
   }
 }

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "echarts": "^4.2.0-rc.2",
     "element-ui": "^2.4.9",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",

src/assets/styles/common.css

+.gray {
+  color: rgba(115, 135, 156, 0.4);
+}
+.star-red {
+  color: #ff0000;
+}
+.clear {
+  clear: both;
+}
+.title {
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 700;
+  font-style: normal;
+  font-size: 14px;
+  color: #73879c;
+  text-align: left;
+}
+.title-center {
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 700;
+  font-style: normal;
+  font-size: 14px;
+  color: #73879c;
+  text-align: center;
+}

src/assets/styles/reset.css

@@ -22,4 +22,4 @@ sup,sub{vertical-align:baseline}
 html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
 body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
 hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
-a {color: #25a4bb;text-decoration: none;}
+a {color: #0000FF;text-decoration: none;}

src/components/List/TableList.vue

-<template>
-  <el-main>
-    <el-table :data="dataList">
-      <el-table-column prop="id" label="id" width="140">
-      </el-table-column>
-      <el-table-column prop="push_state" label="状态" width="120">
-      </el-table-column>
-      <el-table-column prop="title" label="title">
-      </el-table-column>
-      <el-table-column label="time">
-        <template slot-scope="scope">
-          {{scope.row.push_time | fomatDate}}
-        </template>
-      </el-table-column>
-    </el-table>
-  </el-main>
-</template>
-<script>
-export default {
-  data () {
-    return {
-      dataList: []
-    }
-  },
-  created () {
-    this.getDataList()
-  },
-  methods: {
-    getDataList () {
-      this.axios.get('/static/getStoreNoticeListByPageAction.json').then(res => {
-        if (res && res.data && res.data.data) {
-          const { dataList } = res.data.data
-          this.dataList = dataList
-        }
-      })
-    }
-  }
-}
-</script>
-<style>
-.el-main {
-  width: 100%;
-}
-</style>

src/components/MateriaList/index.vue

-<template>
-  <div class="materialist">
-    <el-carousel :interval="4000" type="card" height="200px" :autoplay="false" trigger="click" arrow="never">
-      <el-carousel-item v-for="(item, index) in MateriaList" :key="index">
-        <img :src="item.imgUrl">
-      </el-carousel-item>
-    </el-carousel>
-  </div>
-</template>
-<script>
-export default {
-  data () {
-    return {
-      MateriaList: [
-        {
-          imgUrl: 'http://img.zcool.cn/community/0125fd5770dfa50000018c1b486f15.jpg@1280w_1l_2o_100sh.jpg'
-        },
-        {
-          imgUrl: 'http://img.zcool.cn/community/0125fd5770dfa50000018c1b486f15.jpg@1280w_1l_2o_100sh.jpg'
-        },
-        {
-          imgUrl: 'http://img.zcool.cn/community/0125fd5770dfa50000018c1b486f15.jpg@1280w_1l_2o_100sh.jpg'
-        },
-        {
-          imgUrl: 'http://img.zcool.cn/community/0125fd5770dfa50000018c1b486f15.jpg@1280w_1l_2o_100sh.jpg'
-        },
-        {
-          imgUrl: 'http://img.zcool.cn/community/0125fd5770dfa50000018c1b486f15.jpg@1280w_1l_2o_100sh.jpg'
-        }
-      ]
-    }
-  }
-}
-</script>
-<style lang="stylus" scoped>
-.materialist
-  .el-carousel__item:nth-child(2n)
-    background-color #99a9bf
-  .el-carousel__item:nth-child(2n+1)
-    background-color #d3dce6
-</style>

src/components/Pagination/index.vue

+<template>
+  <div class="marketing-total">
+    <span class="demonstration">显示总数</span>
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">
+    </el-pagination>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      currentPage1: 5
+    }
+  },
+  methods: {
+    handleSizeChange (val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange (val) {
+      console.log(`当前页: ${val}`)
+    }
+  }
+}
+</script>

src/filters/index.js

@@ -3,7 +3,3 @@ import moment from 'moment'
 export function fomatDate (value, format) {
   return moment(value).format(format || 'YYYY-MM-DD, HH:mm:ss')
 }
-
-export function fomatDQ (value, format) {
-  return 'daqianhao'
-}

src/main.js

@@ -5,10 +5,13 @@ import App from './App'
 import router from './router'
 import ElementUI from 'element-ui'
 import './assets/styles/reset.css'
+import './assets/styles/common.css'
 import 'element-ui/lib/theme-chalk/index.css'
 import Axios from 'axios'
 import * as filters from './filters'
 import { http } from './plugin'
+// 引入echarts
+import echarts from 'echarts'
 Vue.use(ElementUI)
 Vue.use(http)
 Object.keys(filters).forEach(key => {
@@ -17,6 +20,7 @@ Object.keys(filters).forEach(key => {
 
 Vue.config.productionTip = false
 Vue.prototype.axios = Axios
+Vue.prototype.$echarts = echarts
 
 /* eslint-disable no-new */
 new Vue({

src/pages/addmarketing/components/AddDesc.vue

+<template>
+  <div class="marketing-title">
+    <el-row class="top-left">
+      <el-col :span="24">
+        <span class="top-title title">新建图文素材推送</span>
+        <span class="top-tips gray">
+          <span class="star-red">*</span>
+          将<a href="#">微信公众平台</a>的图文素材，通过<a href="#">会员标签</a>分类投放，实现精准投放
+        </span>
+      </el-col>
+    </el-row>
+
+    <el-row class="marketing-subtitle">
+      <el-col :span="5" class="subtitle-img">
+        <img src="./../../../assets/images/picture.png" class="iconimg">
+      </el-col>
+      <el-col :span="18" class="subtitle-tips">
+        <p>在微信触达域中，公众号作为最通用的触达渠道，微信为品牌号提供了适配大批量会员触达的图文素材触达方式。</p>
+        <p>
+          <span>
+            <i class="el-icon-check"></i>
+          </span>
+          通过会员标签画像分群的分批精准推送，建议编辑不同的图文素材面向不同的会员群体。</p>
+        <p>
+          <span>
+            <i class="el-icon-check"></i>
+          </span>
+          最大化的利用微信“用户每月只能接受4条”的规则限制，通过舞象云实现多次投放，但每日上限为100次。</p>
+        <p>
+          <span>
+            <i class="el-icon-check"></i>
+          </span>
+          大批量的微信消息推送，微信端控制最大为80W/分钟，平台将进行资源的动态优化，请耐心等待，推送成功后将发送邮件通知。</p>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<style lang="stylus" scoped>
+.marketing-title
+  height 177px
+  background-color #fff
+  .top-left
+    height 50px
+    line-height 50px
+    border-bottom 1px solid gray
+    margin 0 15px
+    .top-title
+      font-weight 400
+      font-size 20px
+    .top-tips
+      padding-left 20px
+    .top-right
+      span
+        padding-right 20px
+  .marketing-subtitle
+    height 130px
+    .subtitle-img
+      .iconimg
+        padding 20px 0 0 70px
+    .subtitle-tips
+      padding-top 30px
+      color #73879C
+      .tips-wechat
+        padding 30px
+</style>

src/pages/addmarketing/index.vue

 <template>
-  <div>msg</div>
+  <div class="marketing">
+    <add-desc></add-desc>
+    <!-- 步骤 -->
+    <el-row></el-row>
+    <div style="height: 300px;">
+      <el-steps direction="vertical" :active="1">
+        <el-step title="新建推送名称" description="88888">
+        </el-step>
+        <el-step title="选择推送素材"></el-step>
+        <el-step title="选择推送范围" description="这是一段很长很长很长的描述性文字"></el-step>
+        <el-step title="预览推送数量"></el-step>
+        <el-step title="执行推送任务"></el-step>
+      </el-steps>
+    </div>
+
+  </div>
 </template>
+<script>
+import AddDesc from './components/AddDesc'
+export default {
+  components: {
+    AddDesc
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.marketing
+  .marketing-button
+    margin-top 10px
+    background-color #fff
+    height 182px
+    .button-left, .button-right
+      padding-left 10px
+      .left-title
+        height 50px
+        line-height 50px
+        .left-title-name
+          float left
+        .left-title-message
+          float right
+          padding-right 20px
+      .left-icon
+        height 140px
+        .icon-left
+          float left
+          width 50%
+        .icon-right, .icon-left
+          padding 20px 0
+          text-align center
+          .icon-wechat
+            font-size 40px
+          .icon-wechat-msg
+            font-size 14px
+            padding-top 10px
+    .button-right
+      .right-marketing
+        padding 20px 0
+        text-align center
+        .icon-wechat
+          font-size 40px
+        .icon-wechat-msg
+          font-size 14px
+          padding-top 10px
+  .marketing-white
+    background-color #fff
+    height 27px
+  .marketing-tabs
+    position relative
+    top -10px
+</style>

src/pages/marketing-center/components/AddMessage.vue

+<template>
+  <div>
+    <el-row class="marketing-button" style="display:flex;">
+      <el-col :span="14" class="button-left">
+        <div class="left-title button-left" style="flex:2">
+          <div class="left-title-name">
+            <span>
+              <img src="./../../../assets/images/wechat.png">
+            </span>
+            <span class="title">微信触达域-公众号</span>
+            <span class="star-red">*</span>
+            <a href="#" class="gray">点击新建群发</a>
+          </div>
+          <div class="left-title-message">
+            <span>
+              <img src="./../../../assets/images/auth.png">
+            </span>
+            <!-- <span>已授权</span> -->
+          </div>
+        </div>
+        <div class="left-icon">
+          <div class="icon-left">
+            <span class="icon-wechat">
+              <img src="./../../../assets/images/picture.png">
+            </span>
+            <p class="title-center icon-wechat-msg">图文素材消息</p>
+          </div>
+          <div class="icon-right">
+            <span class="icon-wechat">
+              <img src="./../../../assets/images/temp.png">
+            </span>
+            <p class="icon-wechat-msg title-center">营销模板消息</p>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="10" class="button-right">
+        <div class="left-title button-right" style="flex:1">
+          <div class="left-title-name">
+            <span>
+              <img src="./../../../assets/images/message.png">
+            </span>
+            <span class="title">移动触达域-短信</span>
+            <span class="star-red">*</span>
+            <a href="#" class="gray">点击新建群发</a>
+          </div>
+          <div class="left-title-message">
+            <span>
+              <img src="./../../../assets/images/unauth.png">
+            </span>
+            <!-- <span>未授权</span> -->
+          </div>
+        </div>
+        <div class="right-marketing">
+          <div>
+            <span class="icon-wechat">
+              <img src="./../../../assets/images/message.png">
+            </span>
+            <p class="icon-wechat-msg title-center">短信营销消息</p>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <div class="marketing-white"></div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {}
+  },
+  components: {},
+  computed: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+<style lang='stylus' scoped>
+.marketing-button
+  margin 8px 0
+  height 182px
+  .button-left, .button-right
+    padding-left 5px
+    background-color #fff
+    height 180px
+    .left-title
+      height 50px
+      line-height 50px
+      .left-title-name
+        float left
+        img
+          width 30px
+          height 30px
+      .left-title-message
+        float right
+    .left-icon
+      height 140px
+      .icon-left
+        float left
+        width 50%
+      .icon-right, .icon-left
+        padding 20px 0
+        text-align center
+        .icon-wechat
+          font-size 40px
+        .icon-wechat-msg
+          font-size 14px
+          padding-top 10px
+  .button-right
+    margin-left 10px
+    .right-marketing
+      padding 20px 0
+      text-align center
+      img
+        width 64px
+        height 64px
+      .icon-wechat
+        font-size 40px
+      .icon-wechat-msg
+        font-size 14px
+        padding-top 10px
+.marketing-white
+  background-color #fff
+  height 27px
+</style>

src/pages/marketing-center/components/ArticleChart.vue

+<template>
+  <div>
+    <el-col :span="6">
+      <div id="artChart" :style="{width: '200px', height: '100px'}"></div>
+    </el-col>
+  </div>
+</template>
+<script>
+export default {
+  mounted () {
+    this.drawLine()
+  },
+  methods: {
+    drawLine () {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('artChart'))
+      // 绘制图表
+      myChart.setOption({
+        xAxis: {
+          type: 'category',
+          show: false
+        },
+        yAxis: {
+          type: 'value',
+          show: false
+        },
+        series: [
+          {
+            data: [28, 85, 9, 41, 17, 99, 7],
+            type: 'line'
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/pages/marketing-center/components/ArticleDetails.vue

+<template>
+  <div class="article-details">
+    <div class="title">• 文章详情</div>
+    <el-row :gutter="20" v-for="(item,index) in datalist" :key="index">
+      <el-col :span="6">
+        <div class="article-img">
+          <img :src="item.img" class="img-size">
+        </div>
+      </el-col>
+      <el-col :span="10">
+        <div class="article-info">
+          <p>{{item.title}}</p>
+          <div>
+            <span>
+              <i class="el-icon-star-off"></i>
+              {{item.readnum}}
+            </span>
+            <span>
+              <i class="el-icon-star-on"></i>
+              {{item.readtime}}
+            </span>
+            <span>
+              <i class="el-icon-sold-out"></i>
+              {{item.originreadnum}}
+            </span>
+            <span>
+              <i class="el-icon-share"></i>
+              {{item.originreadtime}}
+            </span>
+          </div>
+        </div>
+      </el-col>
+      <article-chart></article-chart>
+    </el-row>
+  </div>
+</template>
+<script>
+import ArticleChart from './ArticleChart'
+export default {
+  data () {
+    return {
+      datalist: []
+    }
+  },
+  components: {
+    ArticleChart
+  },
+  created () {
+    this.GetArticleDetail()
+  },
+  methods: {
+    GetArticleDetail () {
+      this.axios.get('static/article-details.json').then(res => {
+        this.datalist = res.data.datalist
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.article-details
+  background-color #fff
+  border-top 1px solid #ccc
+  padding 0 10px
+  .title
+    height 30px
+    line-height 30px
+  .article-img
+    height 90px
+    .img-size
+      width 156px
+      height 100%
+  .article-info
+    p
+      font-size 16px
+      height 30px
+      line-height 30px
+    span
+      height 50px
+      line-height 50px
+      padding-right 30px
+      font-size 16px
+.el-row
+  margin-bottom 10px
+  &:last-child
+    margin-bottom 0
+</style>

src/pages/marketing-center/components/MarketingPush.vue

+<template>
+  <div>
+    <div class="marketing-title">
+      <el-row class="top-left">
+        <el-col :span="14">
+          <span class="top-title">营销推送</span>
+          <span class="top-tips">
+            <span class="star-red">*</span>
+            支持<a href="#">会员标签</a>
+            体系下的精准消息推送</span>
+        </el-col>
+        <el-col :span="10" class="top-right">
+          <span><i class="el-icon-question"></i>营销推送</span>
+          <span><i class="el-icon-question"></i>营销推送</span>
+          <span><i class="el-icon-question"></i>营销推送</span>
+        </el-col>
+      </el-row>
+      <el-row></el-row>
+      <el-row class="marketing-subtitle">
+        <el-col :span="6" class="subtitle-img">
+          <span>
+            <img src="./../../../assets/images/avatar.png">
+          </span>
+        </el-col>
+        <el-col :span="18" class="subtitle-tips">
+          <div>在全域营销环节中，营销消息推送作为最直接的会员触达方式，在会员标签体系的加持下通过不同的触达域支持无限可能的精准营销。</div>
+          <div class="tips-wechat">
+            <el-row>
+              <el-col :span="12" class="wechat-icon">
+                <span>
+                  <img src="./../../../assets/images/wechat.png">
+                </span>
+                <span>微信触达域-公众号</span>
+                <span>
+                  <a href="#">
+                    立即授权</a>
+                </span>
+              </el-col>
+              <el-col :span="12" class="wechat-icon">
+                <span>
+                  <img src="./../../../assets/images/message.png">
+                </span>
+                <span>移动触达域-短信</span>
+                <span>
+                  <a href="#">
+                    前往开通</a>
+                </span>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {}
+  },
+  components: {},
+  computed: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+<style lang='stylus' scoped>
+.marketing-title
+  height 177px
+  background-color #fff
+  .top-left
+    height 50px
+    line-height 50px
+    border-bottom 1px solid gray
+    margin 0 15px
+    .top-title
+      font-size 20px
+      color #73879C
+      text-align left
+    .top-tips
+      padding-left 20px
+      color rgba(115, 135, 156, 0.4)
+      .top-star
+        color #FF0000
+      .top-tag
+        color #0000FF
+    .top-right
+      span
+        padding-right 20px
+        font-size 14px
+        color #496D92
+        text-align left
+  .marketing-subtitle
+    height 130px
+    .subtitle-img
+      line-height 130px
+      padding-left 70px
+    .subtitle-tips
+      padding-top 30px
+      font-family 'PingFangSC-Regular', 'PingFang SC'
+      font-weight 400
+      font-style normal
+      font-size 14px
+      color #73879C
+      .tips-wechat
+        padding 15px
+        .wechat-icon
+          img
+            width 30px
+            height 30px
+</style>

src/components/Tab/MarketingTab.vue → src/pages/marketing-center/components/MarketingTab.vue

@@ -3,14 +3,21 @@
     <el-tab-pane label="图文素材消息" name="first">
       <materia-list></materia-list>
       <push-detail></push-detail>
+      <material-details></material-details>
+      <article-details></article-details>
+    </el-tab-pane>
+    <el-tab-pane label="营销模版消息" name="second">
+      <temp-list></temp-list>
     </el-tab-pane>
-    <el-tab-pane label="营销模版消息" name="second">表格</el-tab-pane>
     <el-tab-pane label="短信营销消息" name="third">表格</el-tab-pane>
   </el-tabs>
 </template>
 <script>
-import MateriaList from 'components/MateriaList'
-import PushDetail from 'components/PushList'
+import MateriaList from './MateriaList'
+import PushDetail from './PushList'
+import MaterialDetails from './MaterialDetails'
+import ArticleDetails from './ArticleDetails'
+import TempList from './TempList'
 
 export default {
   data () {
@@ -20,7 +27,10 @@ export default {
   },
   components: {
     PushDetail,
-    MateriaList
+    MateriaList,
+    MaterialDetails,
+    ArticleDetails,
+    TempList
   },
   methods: {
     handleClick (tab, event) {

src/pages/marketing-center/components/MateriaList.vue

+<template>
+  <div class="materialist clear">
+    <ul>
+      <li v-for="(item,index) in datalist" :key="index" @click="handleClick(index)">
+        <img :src="img1" alt="">
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import img1 from './../../../assets/images/img1.png'
+
+export default {
+  data () {
+    return {
+      datalist: [],
+      img1
+    }
+  },
+  created () {
+    this.getDataList()
+  },
+  methods: {
+    getDataList () {
+      this.axios.get('static/materialist.json').then(res => {
+        if (res && res.data) {
+          this.datalist = res.data.datalist
+        }
+      })
+    },
+    handleClick (index) {
+      console.log('li', index)
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+.materialist
+  ul
+    width 100%
+    height 217px
+    white-space nowrap
+    overflow-x auto
+    margin-bottom 5px
+    li
+      display inline-block
+      margin-left 5px
+      img
+        width 240px
+        height 200px
+    li img:hover
+      border 1px solid skyblue
+      box-shadow 2px 2px 2px skyblue
+/* 定义滚动条高宽及背景 */
+::-webkit-scrollbar
+  height 6px
+/* 滑块 */
+::-webkit-scrollbar-thumb
+  border-radius 7px
+  background-color rgba(127, 127, 127, 1)
+</style>

src/pages/marketing-center/components/MaterialChart.vue

+<template>
+  <div>
+    <el-row>
+      <el-col :span="24">
+        <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  mounted () {
+    this.drawLine()
+  },
+  methods: {
+    drawLine () {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('myChart'))
+      // 绘制图表
+      myChart.setOption({
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '邮件营销',
+            type: 'line',
+            stack: '总量',
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '联盟广告',
+            type: 'line',
+            stack: '总量',
+            data: [220, 182, 191, 234, 290, 330, 310]
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/pages/marketing-center/components/MaterialDetails.vue

+<template>
+  <div class="materian-details">
+    <el-row class="detail-top">
+      <el-col :span="24">
+        <div class="detail-title">
+          <span>
+            <img src="./../../../assets/images/picture.png">
+            <span class="title">素材详情</span>
+            <span class="gray">
+              <span class="star-red">*</span>
+              素材数据采集自微信公众号平台，详见
+              <a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141084">
+                图文分析数据接口</a>
+            </span>
+          </span>
+        </div>
+      </el-col>
+    </el-row>
+    <material-info></material-info>
+    <material-chart></material-chart>
+  </div>
+</template>
+<script>
+import MaterialInfo from './MaterialInfo'
+import MaterialChart from './MaterialChart'
+
+export default {
+  components: {
+    MaterialInfo,
+    MaterialChart
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.materian-details
+  background-color #fff
+  .detail-top
+    height 60px
+    line-height 60px
+    background-color #fff
+    padding-left 15px
+    margin-top 10px
+    .detail-title
+      img
+        width 30px
+        height 30px
+</style>

src/pages/marketing-center/components/MaterialInfo.vue

+<template>
+  <div class="detail-info">
+    <el-row>
+      <el-col :span="6">
+        <div class="detail-left">
+          <img src="./../../../assets/images/img2.png" class="info-img">
+        </div>
+      </el-col>
+      <el-col :span="18">
+        <material-text :datalist="datalist"></material-text>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import MaterialText from './MaterialText'
+export default {
+  data () {
+    return {
+      datalist: []
+    }
+  },
+  components: {
+    MaterialText
+  },
+  created () {
+    this.GetMaterianDatail()
+  },
+  methods: {
+    GetMaterianDatail () {
+      this.axios.get('static/materian-details.json').then(res => {
+        this.datalist = res.data.datalist[0]
+      })
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+.detail-info
+  .detail-left
+    margin-right 10px
+    .info-img
+      width 100%
+      height 100%
+</style>

src/pages/marketing-center/components/MaterialText.vue

+<template>
+  <div class="info-right">
+    <div class="right-reading">
+      <el-row>
+        <el-col :span="4">
+          <div class="right-range title">目标范围</div>
+        </el-col>
+        <el-col :span="10">
+          <div>累积送达人数：
+            <span>{{datalist.sendnum}}</span>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div>平台推送次数：
+            <span>{{datalist.readnum}}</span>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row class="right-data">
+        <el-col :span="4">
+          <div class="title">累计阅读量</div>
+        </el-col>
+        <el-col :span="8">
+          <div class="data-detail">
+            <p>图文阅读人数：{{datalist.readtime}}</p>
+            <p>图文阅读次数: {{datalist.readtime}}</p>
+            <p>原文链接阅读人数：{{datalist.originreadnum}}</p>
+            <p>原文链接阅读次数：{{datalist.originreadtime}}</p>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="title">转化传播量</div>
+        </el-col>
+        <el-col :span="8">
+          <div class="data-detail">
+            <p>分享人数:{{datalist.readtime}}</p>
+            <p>加入收藏人数:{{datalist.originreadtime}}</p>
+            <p>加入收藏次数：{{datalist.readtime}}</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['datalist']
+}
+</script>
+<style lang="stylus" scoped>
+.info-right
+  .right-reading
+    height 50px
+    line-height 50px
+    .right-range
+      padding-left 10px
+    .right-data
+      border-top 1px solid #ccc
+      .title
+        padding-left 10px
+      .data-detail
+        line-height 30px
+</style>

src/components/PushList/Detail.vue → src/pages/marketing-center/components/PushDetail.vue

 <template>
-  <div class="marketing-detail">
-    <div>
-      <div v-for="(item, index) in dataList" :key="index" class="detail-single">
+  <div class="detail-all clear">
+    <el-row>
+      <el-col :span="12" v-for="(item, index) in dataList" :key="index">
+        <div class="detail-single">
           <div class="detail-top">
-          <span class="top-name">{{item.name}}</span>
+            <span class="top-name detail-title">{{item.name}}</span>
             <div class="top-right">
-            <span class="top-time">{{item.time}}</span>
+              <span class="top-time detail-title">{{item.time}}</span>
               <span class="top-state">{{item.state}}</span>
             </div>
           </div>
           <div class="detail-data">
-          <span class="">推送人数： {{item.num}}</span>
-          <span>推送成功： {{item.suc}}</span>
-          <span>{{item.type}}</span>
+            <span>
+              <span class="detail-title">推送人数：</span> {{item.num}}
+              <span class="detail-title">推送成功:</span> {{item.suc}}
+            </span>
+            <span class="detail-title">失败原因:</span> {{item.suc}}
+            <span class="detail-title">{{item.type}}</span>
           </div>
           <div class="detail-node">
-          <span>创建推送节点： {{item.node}}</span>
+            <span class="detail-title">创建推送节点：</span> {{item.node}}
           </div>
         </div>
-    </div>
-    <!-- <div class="marketing-total">
-      <span class="demonstration">显示总数</span>
-      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">
-      </el-pagination>
-    </div> -->
+      </el-col>
+    </el-row>
+    <pagination></pagination>
   </div>
 </template>
 
 <script>
+import Pagination from 'components/Pagination'
 export default {
   data () {
     return {
-      currentPage1: 5,
       dataList: []
     }
   },
+  components: {
+    Pagination
+  },
   created () {
     this.GetPushDetail()
   },
@@ -45,19 +49,37 @@ export default {
           this.dataList = res.data.dataList
         }
       })
-    },
-    handleSizeChange (val) {
-      console.log(`每页 ${val} 条`)
-    },
-    handleCurrentChange (val) {
-      console.log(`当前页: ${val}`)
     }
   }
 }
 </script>
 <style lang="stylus" scoped>
-.marketing-detail
+.detail-all
+  .detail-title
+    font-size 14px
+    color #496D92
+    text-align left
   .detail-single
+    height 124px
+    background-color rgba(251, 252, 252, 1)
+    border-radius 5px
+    box-shadow 5px 5px 5px rgba(228, 228, 228, 0.349019)
+    margin 0 15px 15px 0
+    padding 0 10px
+    .detail-top
+      .top-name, .top-right
+        display inline-block
+        height 40px
+        line-height 40px
+      .top-right
+        float right
+  .detail-data, .detail-node
+    height 40px
+    line-height 40px
+</style>
+/*
+
+.detail-single
     background-color #eee
     padding 0px 10px
     margin-bottom 10px
@@ -74,4 +96,5 @@ export default {
   .detail-data, .detail-node
     height 40px
     line-height 40px
-</style>
+
+*/

src/components/PushList/index.vue → src/pages/marketing-center/components/PushList.vue

 <template>
-  <div class="push-detail">
+  <div class="push-detail clear">
     <div class="detail-top">
       <span>
-        <i class="el-icon-edit-outline"></i>
+        <img src="./../../../assets/images/push.png">
       </span>
-      <span class="detail-title">推送详情</span>
+      <span class="detail-title title">推送详情</span>
     </div>
     <detail class="detail-info"></detail>
   </div>
 </template>
 <script>
-import Detail from './Detail'
+import Detail from './PushDetail'
 
 export default {
   components: {
@@ -23,9 +23,12 @@ export default {
 .push-detail
   background #fff
   .detail-top
-    height 50px
+    height 40px
     line-height 50px
     padding 0 15px
-    .detail-title
-      font-size 14px
+    img
+      width 30px
+      height 30px
+  .detail-info
+    padding 10px
 </style>

src/pages/marketing-center/components/TempList.vue

+<template>
+  <div class="temp-list clear">
+    <div class="temp-button">
+      <el-button type="text">重置</el-button>
+      <el-button type="primary">查询</el-button>
+    </div>
+    <el-row class="temp-input">
+      <el-col :span="2">
+        <div>推送名称:</div>
+      </el-col>
+      <el-col :span="4">
+        <div>
+          <el-input v-model="input" placeholder="请输入内容"></el-input>
+        </div>
+      </el-col>
+      <el-col :span="2" :offset="2">
+        <div>推送时间：</div>
+      </el-col>
+      <el-col :span="6">
+        <div>
+          <el-date-picker v-model="value6" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+          </el-date-picker>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row class="temp-input">
+      <el-col :span="2">
+        <div class="">推送人数:</div>
+      </el-col>
+      <el-col :span="4">
+        <div>
+          <el-input v-model="input" placeholder="请输入内容"></el-input>
+        </div>
+      </el-col>
+      <el-col :span="1">
+        <div>
+          -
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div>
+          <el-input v-model="input" placeholder="请输入内容"></el-input>
+        </div>
+      </el-col>
+      <el-col :span="3" :offset="2">
+        <div>创建推送节点：</div>
+      </el-col>
+      <el-col :span="4">
+        <div>
+          <el-select v-model="value" placeholder="请选择">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-table :data="dataList">
+      <el-table-column prop="id" label="推送名称" width="140">
+      </el-table-column>
+      <el-table-column prop="push_state" label="推送类型" width="120">
+      </el-table-column>
+      <el-table-column label="推送时间">
+        <template slot-scope="scope">
+          {{scope.row.push_time | fomatDate}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="title" label="推送范围">
+      </el-table-column>
+      <el-table-column prop="title" label="推送人数">
+      </el-table-column>
+      <el-table-column prop="title" label="推送成功人数">
+      </el-table-column>
+      <el-table-column prop="title" label="创建消息节点">
+      </el-table-column>
+      <el-table-column prop="title" label="推送进度">
+      </el-table-column>
+    </el-table>
+  </div>
+
+</template>
+<script>
+export default {
+  data () {
+    return {
+      input: '',
+      value6: '',
+      dataList: [],
+      options: [
+        {
+          value: '选项1',
+          label: '黄金糕'
+        },
+        {
+          value: '选项2',
+          label: '双皮奶'
+        },
+        {
+          value: '选项3',
+          label: '蚵仔煎'
+        },
+        {
+          value: '选项4',
+          label: '龙须面'
+        },
+        {
+          value: '选项5',
+          label: '北京烤鸭'
+        }
+      ],
+      value: ''
+    }
+  },
+  created () {
+    this.getDataList()
+  },
+  methods: {
+    getDataList () {
+      this.axios.get('/static/getStoreNoticeListByPageAction.json').then(res => {
+        if (res && res.data && res.data.data) {
+          const { dataList } = res.data.data
+          this.dataList = dataList
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+.temp-list
+  .temp-button
+    height 50px
+    // float right
+</style>

src/pages/marketing-center/index.vue

 <template>
   <div class="marketing">
-    <div class="marketing-title">
-      <el-row class="top-left">
-        <el-col :span="12">
-          <span class="top-title">营销推送</span>
-          <span class="top-tips">* 支持<a href="#">会员标签</a>
-            体系下的精准消息推送</span>
-        </el-col>
-        <el-col :span="12" class="top-right">
-          <span><i class="el-icon-question"></i>营销推送</span>
-          <span><i class="el-icon-question"></i>营销推送</span>
-          <span><i class="el-icon-question"></i>营销推送</span>
-        </el-col>
-      </el-row>
-      <el-row></el-row>
-      <el-row class="marketing-subtitle">
-        <el-col :span="5" class="subtitle-img">
-          <span><i class="el-icon-news iconimg"></i></span>
-        </el-col>
-        <el-col :span="18" class="subtitle-tips">
-          <div>在全域营销环节中，营销消息推送作为最直接的会员触达方式，在会员标签体系的加持下通过不同的触达域支持无限可能的精准营销。</div>
-          <div class="tips-wechat">
-            <el-row>
-              <el-col :span="12">
-                <span>
-                  <i class="el-icon-news"></i>
-                </span>
-                <span>微信触达域-公众号</span>
-                <span>
-                  <a href="#">
-                    立即授权</a>
-                </span>
-              </el-col>
-              <el-col :span="12">
-                <span>
-                  <i class="el-icon-message"></i>
-                </span>
-                <span>移动触达域-短信</span>
-                <span>
-                  <a href="#">
-                    前往开通</a>
-                </span>
-              </el-col>
-            </el-row>
-          </div>
-        </el-col>
-      </el-row>
-    </div>
-    <el-row class="marketing-button">
-      <el-col :span="14" class="button-left">
-        <div class="left-title">
-          <div class="left-title-name">
-            <span><i class="el-icon-news"></i></span>
-            <span>微信触达域-公众号</span>
-            <span>*</span>
-            <a href="#">点击新建群发</a>
-          </div>
-          <div class="left-title-message">
-            <span><i class="el-icon-success"></i></span>
-            <span>已授权</span>
-          </div>
-        </div>
-        <div class="left-icon">
-          <div class="icon-left">
-            <span class="icon-wechat">
-              <i class="el-icon-picture-outline"></i>
-            </span>
-            <p class="icon-wechat-msg">图文素材消息</p>
-          </div>
-          <div class="icon-right">
-            <span class="icon-wechat">
-              <i class="el-icon-document"></i>
-            </span>
-            <p class="icon-wechat-msg">营销模板消息</p>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="10" class="button-right">
-        <div class="left-title">
-          <div class="left-title-name">
-            <span><i class="el-icon-message"></i></span>
-            <span>移动触达域-短信</span>
-            <span>*</span>
-            <a href="#">点击新建群发</a>
-          </div>
-          <div class="left-title-message">
-            <span><i class="el-icon-success"></i></span>
-            <span>未授权</span>
-          </div>
-        </div>
-        <div class="right-marketing">
-          <div>
-            <span class="icon-wechat">
-              <i class="el-icon-message"></i>
-            </span>
-            <p class="icon-wechat-msg">短信营销消息</p>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="24">
-        <div class="marketing-white"></div>
-      </el-col>
-    </el-row>
+    <marketing-push></marketing-push>
+    <add-message></add-message>
     <marketing-tab class="marketing-tabs"></marketing-tab>
   </div>
 </template>
 
 <script>
-import MarketingTab from 'components/Tab/MarketingTab'
+import MarketingPush from './components/MarketingPush'
+import AddMessage from './components/AddMessage'
+import MarketingTab from './components/MarketingTab'
 
 export default {
   components: {
+    MarketingPush,
+    AddMessage,
     MarketingTab
   }
 }
@@ -120,72 +22,7 @@ export default {
 
 <style lang="stylus" scoped>
 .marketing
-  .marketing-title
-    height 177px
-    background-color #fff
-    .top-left
-      height 50px
-      line-height 50px
-      border-bottom 1px solid gray
-      margin 0 15px
-      .top-title
-        font-size 20px
-      .top-tips
-        padding-left 20px
-      .top-right
-        span
-          padding-right 20px
-    .marketing-subtitle
-      height 130px
-      .subtitle-img
-        .iconimg
-          font-size 70px
-          line-height 130px
-          padding-left 70px
-      .subtitle-tips
-        padding-top 30px
-        .tips-wechat
-          padding 30px
-  .marketing-button
-    margin-top 10px
-    background-color #fff
-    height 182px
-    .button-left, .button-right
-      padding-left 10px
-      .left-title
-        height 50px
-        line-height 50px
-        .left-title-name
-          float left
-        .left-title-message
-          float right
-          padding-right 20px
-      .left-icon
-        height 140px
-        .icon-left
-          float left
-          width 50%
-        .icon-right, .icon-left
-          padding 20px 0
-          text-align center
-          .icon-wechat
-            font-size 40px
-          .icon-wechat-msg
-            font-size 14px
-            padding-top 10px
-    .button-right
-      .right-marketing
-        padding 20px 0
-        text-align center
-        .icon-wechat
-          font-size 40px
-        .icon-wechat-msg
-          font-size 14px
-          padding-top 10px
-  .marketing-white
-    background-color #fff
-    height 27px
   .marketing-tabs
     position relative
-    top -10px
+    top -15px
 </style>

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 Vue.use(Router)
 export default new Router({
+  mode: 'history',
   routes: [
     {
       path: '/',

static/article-details.json

+{
+  "datalist": [
+    {
+      "img": "static/image/article1.png",
+      "title": "马云张勇",
+      "readnum": 1111,
+      "readtime": 6,
+      "originreadnum": 111,
+      "originreadtime": 77
+    },
+    {
+      "img": "static/image/article2.png",
+      "title": "全面揭秘阿里",
+      "readnum": 6,
+      "readtime": 2,
+      "originreadnum": 111,
+      "originreadtime": 9
+    },
+    {
+      "img": "static/image/article3.png",
+      "title": "7-eleven",
+      "readnum": 2,
+      "readtime": 8,
+      "originreadnum": 111,
+      "originreadtime": 1
+    }
+  ]
+}

static/materialist.json

+{
+  "datalist": [
+    {
+      "imgUrl": "./../../../assets/images/img1.png"
+    },
+    {
+      "imgUrl": "./../../../assets/images/img2.png"
+    },
+    {
+      "imgUrl": "./../../../assets/images/img3.png"
+    },
+    {
+      "imgUrl": "./../../../assets/images/img1.png"
+    },
+    {
+      "imgUrl": "./../../../assets/images/img2.png"
+    },
+    {
+      "imgUrl": "./../../../assets/images/img3.png"
+    }
+  ]
+}

static/materian-details.json

+{
+  "datalist": [
+    {
+      "img": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3338860012,664035936&fm=27&gp=0.jpg",
+      "sendnum": 12111124,
+      "readnum": 1111,
+      "readtime": 12111121,
+      "originreadnum": 111,
+      "originreadtime": 5785111412
+    },
+    {
+      "img": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3338860012,664035936&fm=27&gp=0.jpg",
+      "sendnum": 2222,
+      "readnum": 222,
+      "readtime": 22222,
+      "originreadnum": 122224545,
+      "originreadtime": 22222
+    },
+    {
+      "img": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3338860012,664035936&fm=27&gp=0.jpg",
+      "sendnum": 333,
+      "readnum": 3333,
+      "readtime": 3,
+      "originreadnum": 33,
+      "originreadtime": 5733385412
+    }
+  ]
+}