添加BaseHeader

package.json

@@ -18,9 +18,10 @@
         "@vue/cli-plugin-babel": "^3.0.3",
         "@vue/cli-plugin-eslint": "^3.0.3",
         "@vue/cli-service": "^3.3.0",
-        "vue-template-compiler": "^2.5.21",
         "node-sass": "^4.9.3",
-        "sass-loader": "^7.1.0"
+        "sass-loader": "^7.1.0",
+        "vue-svg-icon": "^1.2.9",
+        "vue-template-compiler": "^2.5.21"
     },
     "eslintConfig": {
         "root": true,

src/assets/scss/custom.scss

@@ -0,0 +1,3 @@
+.op0{
+    opacity: 0;
+}

src/assets/scss/utils.scss

@@ -54,7 +54,7 @@ $height: 100;
 margin
 
 */
-$margin: 100;
+$margin: 50;
 
 @while $margin >= 0 {
     .ml#{$margin}p {
@@ -63,7 +63,7 @@ $margin: 100;
     $margin: $margin - 1;
 }
 
-$margin: 100;
+$margin: 50;
 @while $margin >= 0 {
     .mr#{$margin}p {
         margin-right: #{$margin}px !important;
@@ -71,7 +71,7 @@ $margin: 100;
     $margin: $margin - 1;
 }
 
-$margin: 100;
+$margin: 50;
 @while $margin >=0 {
     .mt#{$margin}p {
         margin-top: #{$margin}px !important;
@@ -79,7 +79,7 @@ $margin: 100;
     $margin: $margin - 1;
 }
 
-$margin: 100;
+$margin: 50;
 @while $margin >= 0 {
     .mb#{$margin}p {
         margin-bottom: #{$margin}px !important;
@@ -87,7 +87,7 @@ $margin: 100;
     $margin: $margin - 1;
 }
 
-$margin: 100;
+$margin: 50;
 @while $margin >= 0 {
     .m#{$margin}p {
         margin: #{$margin}px !important;
@@ -103,7 +103,7 @@ padding
 */
 
 
-$padding: 100;
+$padding: 50;
 @while $padding >= 0 {
     .pl#{$padding}p {
         padding-left: #{$padding}px !important;
@@ -111,7 +111,7 @@ $padding: 100;
     $padding: $padding - 1;
 }
 
-$padding: 100;
+$padding: 50;
 @while $padding >= 0 {
     .pr#{$padding}p {
         padding-right: #{$padding}px !important;
@@ -119,7 +119,7 @@ $padding: 100;
     $padding: $padding - 1;
 }
 
-$padding: 100;
+$padding: 50;
 @while $padding >= 0 {
     .pt#{$padding}p {
         padding-top: #{$padding}px !important;
@@ -127,7 +127,7 @@ $padding: 100;
     $padding: $padding - 1;
 }
 
-$padding: 100;
+$padding: 50;
 @while $padding >= 0 {
     .pb#{$padding}p {
         padding-bottom: #{$padding}px !important;
@@ -135,7 +135,7 @@ $padding: 100;
     $padding: $padding - 1;
 }
 
-$padding: 100;
+$padding: 50;
 @while $padding >= 0 {
     .p#{$padding}p {
         padding: #{$padding}px !important;
@@ -151,7 +151,7 @@ font
 */
 
 $font: 40;
-@while $font >=0 {
+@while $font >=10 {
     .f#{$font} {
         font-size: #{$font}px!important;
     }

src/components/BaseHeader.vue

@@ -0,0 +1,66 @@
+<template>
+    <div id='BaseHeader'>
+        <svg v-if="isShowLeftBtn" @click="$emit('back')" t="1564765917375" class="icon left" viewBox="0 0 1024 1024"
+             version="1.1"
+             xmlns="http://www.w3.org/2000/svg"
+             p-id="16292" width="32" height="32">
+            <path d="M363.840919 472.978737C336.938714 497.358861 337.301807 537.486138 364.730379 561.486138L673.951902 832.05497C682.818816 839.813519 696.296418 838.915012 704.05497 830.048098 711.813519 821.181184 710.915012 807.703582 702.048098 799.94503L392.826577 529.376198C384.59578 522.174253 384.502227 511.835287 392.492414 504.59418L702.325747 223.807723C711.056111 215.895829 711.719614 202.404616 703.807723 193.674252 695.895829 184.943889 682.404617 184.280386 673.674253 192.192278L363.840919 472.978737Z"
+                  p-id="16293" fill="#8a8a8a"></path>
+        </svg>
+        <span class="fb c-white f20">{{title}}</span>
+        <slot></slot>
+    </div>
+</template>
+<script>
+    export default {
+        name: "BaseHeader",
+        components: {},
+        props: {
+            title: {
+                type: String,
+                default: '我的名片'
+            },
+            isShowRightBtn: {
+                type: Boolean,
+                default: true
+            },
+            isShowLeftBtn: {
+                type: Boolean,
+                default: true
+            }
+        },
+        data() {
+            return {}
+        },
+        created() {
+            
+        },
+        computed: {},
+        methods: {}
+    }
+</script>
+
+<style scoped lang='scss'>
+    #BaseHeader {
+        text-align: center;
+        height: 60px;
+        border-bottom: 1px solid #cccccc11;
+        position: relative;
+
+        span {
+            line-height: 60px;
+        }
+
+        .left {
+            position: absolute;
+            left: 10px;
+            top: 15px;
+        }
+
+        & > :nth-last-child(1) {
+            position: absolute;
+            right: 17px;
+            top: 15px;
+        }
+    }
+</style>

src/components/user/Me.vue

@@ -1,268 +0,0 @@
-<template>
-    <div class="me">
-        <div class="container">
-            <!--<div class="header" v-bind:style="{height:height/2+'px'}">-->
-            <div class="header">
-                <div class="top pt20p pl10p pr10p">
-                    <img src="../../assets/img/icon/next.svg" alt="" class="d-none">
-                    <img src="../../assets/img/icon/more.svg" alt="">
-                </div>
-                <div class="bottom">
-                    <div class="container pr10p pl10p pt10p">
-                        <div class="head">
-                            <img src="../../assets/img/icon/head-image.jpeg" class="head-image ml20p">
-                            <div class="other-buttons" v-if="false">
-                                <div class="attention">
-                                    关注
-                                </div>
-                                <div class="more-attention">
-                                    -
-                                </div>
-                            </div>
-                            <div class="my-buttons ">
-                                <div class="collect">
-                                    <img src="../../assets/img/icon/collect-white.svg" alt="">
-                                    <span class="mr5p">收藏</span>
-                                </div>
-                                <div class="add-friend">
-                                    <img src="../../assets/img/icon/add-friend-white.svg" alt="">
-                                </div>
-                                <div class="qr-code">
-                                    <img src="../../assets/img/icon/qr-code-white.svg" alt="">
-                                </div>
-                            </div>
-                        </div>
-                        <div class="description">
-                            <p class="name f22 mt5p mb5p">ttentau</p>
-                            <div class="number mb10p">
-                                <span>抖音号：605128307</span>
-                                <div class="jrtt">
-                                    <img src="../../assets/img/icon/sina.svg" alt="">
-                                    <span>头条主页</span>
-                                    <img src="../../assets/img/icon/next.svg" alt="">
-                                </div>
-                            </div>
-                            <div class="signature f12 mb10p">
-                                <span>填写个性签名更容易获得别人关注哦</span>
-                            </div>
-                            <div class="info f10 mb10p">
-                                <div class="age">
-                                    <img src="../../assets/img/icon/person.svg" alt="">
-                                    <span>22岁</span>
-                                </div>
-                                <div class="location">
-                                    <span>上海</span>
-                                </div>
-                                <div class="school">
-                                    四川理工大学
-                                </div>
-                            </div>
-                            <div class="heat mb10p">
-                                <span>8获赞</span>
-                                <span>38关注</span>
-                                <span>42粉丝</span>
-                            </div>
-                        </div>
-                        <div class="tabset">
-                            <div class="tab active">
-                                <span>作品1</span>
-                            </div>
-                            <div class="tab">
-                                <span>动态6</span>
-                            </div>
-                            <div class="tab">
-                                <span>喜欢6</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="content oh">
-                <div class="video-container" v-for="(item,index) of videos" :key="index"  v-bind:style="{'height':width/3*1.2+'px'}">
-                    <video src="../../assets/video/吴三二的光年之外.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
-                    <div class="love">
-                        <img src="../../assets/img/icon/love.svg" alt="">
-                        <span class="ml5p">72.3w</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <Footer v-bind:init-tab="5" style="position: fixed;"/>
-    </div>
-</template>
-
-<script>
-    import Footer from '../Footer';
-
-    export default {
-        name: "Me",
-        components: {
-            Footer
-        },
-        data() {
-            return {
-                videos: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
-                height:0,
-                width:0,
-                footerHeight:0
-            }
-        },
-        created() {
-            this.height = document.body.clientHeight;
-            this.width = document.body.clientWidth;
-        },
-        mounted() {
-                  }
-    }
-</script>
-
-<style scoped lang="scss">
-    .me {
-        color: white;
-        .header {
-            background: gray;
-            .top {
-                /*height: 30%;*/
-                height: 100px;
-                display: flex;
-                justify-content: flex-end;
-                background: url("../../assets/img/icon/top-bg.jpg");
-                img {
-                    border-radius: 50%;
-                    padding: 5px;
-                    background: #524a4a;
-                    height: 20px;
-                    width: 20px;
-                    &:nth-child(1) {
-                        transform: rotate(180deg);
-                    }
-                }
-            }
-            .bottom {
-                background-image: url("../../assets/img/icon/head-image.jpeg");
-                background-position: center;
-                background-size: cover;
-                background-repeat: no-repeat;
-                /*height: 60%;*/
-                .container {
-                    height: 100%;
-                    background-color: #2e3244ed;
-                    position: relative;
-                    .head {
-                        width: 100%;
-                        right: 10px;
-                        position: absolute;
-                        top: -8px;
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: center;
-                        .head-image {
-                            background: black;
-                            padding: 5px;
-                            border-radius: 50%;
-                            width: 60px;
-                            height: 60px;
-                        }
-                        .my-buttons {
-                            div {
-                                display: flex;
-                                align-items: center;
-                                float: left;
-                                border-radius: 2px;
-                                background: #676767;
-                                margin-right: 5px;
-                                img {
-                                    padding: 6px;
-                                    height: 20px;
-                                }
-                                span {
-                                    color: #cdcdcd;
-                                }
-                            }
-
-                        }
-                    }
-                    .description {
-                        margin-top: 60px;
-                        color: white;
-                        .number {
-                            padding-bottom: 10px;
-                            border-bottom: 1px solid gray;
-                            .jrtt {
-                                float: right;
-                                img {
-                                    height: 10px;
-                                    width: 10px;
-                                }
-                                span {
-                                    margin: 0 5px;
-                                }
-                            }
-                        }
-                        .info {
-                            display: flex;
-                            align-items: center;
-                            div {
-                                display: flex;
-                                align-items: center;
-                                float: left;
-                                border-radius: 2px;
-                                background: #676767;
-                                margin-right: 5px;
-                                padding: 2px 4px;
-                                img {
-                                    height: 10px;
-                                    margin-right: 3px;
-                                }
-                                span {
-                                    color: #cdcdcd;
-                                }
-                            }
-                        }
-                        .heat {
-                            span {
-                                margin-right: 10px;
-                            }
-                        }
-                    }
-                    .tabset {
-                        display: flex;
-                        justify-content: space-around;
-                        .tab {
-                            padding-top: 10px;
-                            padding-bottom: 10px;
-                            text-align: center;
-                            width: 30%;
-                        }
-                        .active {
-                            border-bottom: 2px solid gold;
-                        }
-                    }
-                }
-
-            }
-        }
-        .content {
-            .video-container {
-                width: 33%;
-                float: left;
-                position: relative;
-                overflow: hidden;
-                border: .5px solid black;
-                video {
-                    width: 100%;
-                }
-                .love {
-                    position: absolute;
-                    bottom: 10px;
-                    left: 10px;
-                    display: flex;
-                    align-items: center;
-                    img {
-                        height: 20px;
-                    }
-                }
-            }
-        }
-    }
-</style>

src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
+import Icon from 'vue-svg-icon/Icon.vue'
 import VueRouter from 'vue-router'
 import './assets/scss/index.scss'
 import Index from './pages/home/Index'
@@ -8,9 +9,15 @@ import Message from './pages/home/Message'
 import Me from './pages/home/Me'
 import Music from './components/common/Music.vue'
 import countryChoose from "./pages/login/countryChoose"
+import MyCard from "./pages/me/MyCard"
+
+
+import BaseHeader from "./components/BaseHeader"
 
 Vue.config.productionTip = false
 
+Vue.component('icon', Icon)
+Vue.component('BaseHeader', BaseHeader)
 Vue.use(VueRouter)
 
 const router = new VueRouter({
@@ -24,8 +31,31 @@ const router = new VueRouter({
         { path: '/me', component: Me },
         { path: '/music', component: Music },
         { path: '/countryChoose', component: countryChoose },
+        { path: '/myCard', component: MyCard },
     ]
 })
+Vue.mixin({
+    methods: {
+        getCss(curEle, attr) {
+            let val = null, reg = null
+            if ("getComputedStyle" in window) {
+                val = window.getComputedStyle(curEle, null)[attr]
+            } else {   //ie6~8不支持上面属性
+                //不兼容
+                if (attr === "opacity") {
+                    val = curEle.currentStyle["filter"]   //'alpha(opacity=12,345)'
+                    reg = /^alphaopacity=(\d+(?:\.\d+)?)opacity=(\d+(?:\.\d+)?)$/i
+                    val = reg.test(val) ? reg.exec(val)[1] / 100 : 1
+                } else {
+                    val = curEle.currentStyle[attr]
+                }
+            }
+            reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i
+            return reg.test(val) ? parseFloat(val) : val
+        }
+    }
+})
+
 new Vue({
     render: h => h(App),
     router

src/pages/home/Me.vue

@@ -176,13 +176,35 @@
                         <img src="../../assets/img/icon/order-gray.png" alt="">
                         <span>订单</span>
                     </li>
-                    <li class="exception">
+                    <li class="exception" @click="toggleService()">
                         <div class="d-flex align-items-center">
                             <img src="../../assets/img/icon/category-gray.png" alt="">
                             <span>服务</span>
                         </div>
                         <div class="triangle"></div>
                     </li>
+                    <div class="service">
+                        <li>
+                            <img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
+                            <span>购物助手</span>
+                        </li>
+                        <li>
+                            <img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
+                            <span>生活服务订单</span>
+                        </li>
+                        <li>
+                            <img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
+                            <span>DOU+ 上热门</span>
+                        </li>
+                        <li>
+                            <img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
+                            <span>彩铃服务</span>
+                        </li>
+                        <li>
+                            <img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
+                            <span>免流量看抖音</span>
+                        </li>
+                    </div>
 
                     <div class="line"></div>
 
@@ -194,10 +216,16 @@
                         <img src="../../assets/img/icon/juan-gray.png" alt="">
                         <span>卡卷</span>
                     </li>
+
+                    <div class="line"></div>
+
                     <li>
                         <img src="../../assets/img/icon/umbrella-gray.png" alt="">
                         <span>未成年保护工具</span>
                     </li>
+
+                    <div class="line"></div>
+
                     <li>
                         <img src="../../assets/img/icon/setting-gray.png" alt="">
                         <span>设置</span>
@@ -214,10 +242,12 @@
         name: "Me",
         components: { 'my-footer': Footer },
         data() {
-            return {}
+            return {
+                serviceEl: {},
+                serviceHeight: 0
+            }
         },
         created() {
-            
         },
         mounted() {
             !function () {
@@ -624,9 +654,22 @@
                 reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i
                 return reg.test(val) ? parseFloat(val) : val
             }
+
+            this.serviceEl = document.querySelector('.service')
+            this.serviceHeight = this.getCss(this.serviceEl, 'height')
+            this.serviceEl.style.height = this.serviceHeight + 'px'
         },
         computed: {},
-        methods: {}
+        methods: {
+            toggleService() {
+                console.log(this.serviceEl.style.height)
+                if (this.serviceEl.style.height === this.serviceHeight + 'px') {
+                    this.serviceEl.style.height = 0
+                }else {
+                    this.serviceEl.style.height = this.serviceHeight + 'px'
+                }
+            }
+        }
     }
 </script>
 
@@ -862,18 +905,25 @@
                         height: 1px;
                         background: #cccccc;
                         opacity: .1;
-                        margin: 0 20px;
+                        margin: 5px 20px;
+                    }
+
+                    .service {
+                        transition: all .3s;
+                        overflow: hidden;
                     }
 
                     li {
-                        padding:20px;
+                        background: $right-bg-color;
+                        padding: 20px;
                         list-style: none;
                         display: flex;
                         align-items: center;
 
-                        &:active{
-                            background: #ffffff;
+                        &:active {
+                            background: #454b65;
                         }
+
                         img {
                             height: 30px;
                             width: 30px;

src/pages/me/MyCard.vue

@@ -0,0 +1,52 @@
+<template>
+    <div id='MyCard'>
+        <BaseHeader @back="back">
+            <svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                 xmlns="http://www.w3.org/2000/svg"
+                 p-id="15320" width="32" height="32">
+                <path d="M182.528 793.185a46.336 46.336 0 0 1-6.502-0.46c-25.196-3.533-43.06-26.942-39.819-52.168 16.533-152.612 70.907-266.071 161.639-337.362 65.428-51.405 147.963-80.18 245.325-85.52l5.626-0.312 0.01-84.772a54.792 54.792 0 0 1 15.228-36.956 55.66 55.66 0 0 1 39.91-17.075c14.659 0 28.385 5.652 38.728 15.923L862.5 418.816c35.625 36.526 35.645 93.737 0.036 130.237L642.6 773.13a54.856 54.856 0 0 1-37.212 15.836l-1.567 0.026c-30.034-0.005-54.241-23.593-55.014-53.704l-0.01-90.926-9.365-0.025c-84.751 0-238.802 16.706-318.428 128.604a46.669 46.669 0 0 1-38.446 20.244h-0.031z m356.89-200.955c13.204 0 23.67 0.374 29.926 0.594l0.62 0.026c2.222 0.082 3.865 0.138 4.884 0.138a26.086 26.086 0 0 1 26.06 26.056v122.178l224.385-228.608c15.687-16.076 15.657-41.272-0.057-57.374L600.91 226.299v116.567a26.076 26.076 0 0 1-26.05 26.05c-148.947 0-336.052 58.68-381.59 338.248l-3.153 19.349 13.373-14.336C300.861 607.816 455.757 592.23 539.418 592.23z"
+                      fill="#8a8a8a" p-id="15321">
+                </path>
+            </svg>
+        </BaseHeader>
+        <div class="content">
+            <div class="card">
+
+            </div>
+            <div class="footer">
+                <div class="btn">
+                    <img src="@/assets/img/icon/download.png" alt="" style="height: 50px;">
+                    <span>保存到相册</span>
+                </div>
+                <div class="btn">
+                    <img src="../../assets/img/icon/ahb.png" alt="" style="height: 50px;">
+                    <span>保存到相册</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        name: "MyCard",
+        components: {},
+        data() {
+            return {}
+        },
+        created() {
+            
+        },
+        computed: {},
+        methods: {
+            back() {
+                window.history.back()
+            }
+        }
+    }
+</script>
+
+<style scoped lang='scss'>
+    #MyCard {
+
+    }
+</style>

src/svg/share-gray.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1564764973962" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14814" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M182.528 793.185a46.336 46.336 0 0 1-6.502-0.46c-25.196-3.533-43.06-26.942-39.819-52.168 16.533-152.612 70.907-266.071 161.639-337.362 65.428-51.405 147.963-80.18 245.325-85.52l5.626-0.312 0.01-84.772a54.792 54.792 0 0 1 15.228-36.956 55.66 55.66 0 0 1 39.91-17.075c14.659 0 28.385 5.652 38.728 15.923L862.5 418.816c35.625 36.526 35.645 93.737 0.036 130.237L642.6 773.13a54.856 54.856 0 0 1-37.212 15.836l-1.567 0.026c-30.034-0.005-54.241-23.593-55.014-53.704l-0.01-90.926-9.365-0.025c-84.751 0-238.802 16.706-318.428 128.604a46.669 46.669 0 0 1-38.446 20.244h-0.031z m356.89-200.955c13.204 0 23.67 0.374 29.926 0.594l0.62 0.026c2.222 0.082 3.865 0.138 4.884 0.138a26.086 26.086 0 0 1 26.06 26.056v122.178l224.385-228.608c15.687-16.076 15.657-41.272-0.057-57.374L600.91 226.299v116.567a26.076 26.076 0 0 1-26.05 26.05c-148.947 0-336.052 58.68-381.59 338.248l-3.153 19.349 13.373-14.336C300.861 607.816 455.757 592.23 539.418 592.23z" fill="#8a8a8a" p-id="14815"></path></svg>

vue.config.js

@@ -1,9 +1,10 @@
 // vue.config.js
+const isProduction = process.env.NODE_ENV === 'production'
+
 module.exports = {
     // 选项...
-    publicPath: process.env.NODE_ENV === 'production' ? '' : '',
-    assetsDir: '',//资源路径
-    outputDir: process.env.outputDir,//打包输出路径
+    publicPath: isProduction ? '' : '',
+    assetsDir: isProduction ? './' : './',
     // configureWebpack: config => {
     //     config.externals = {
     //         "vue": "Vue",