postcss.config.js

@@ -1,25 +1,29 @@
-module.exports = {
-  "plugins": {
-    "postcss-import": {},
-    "postcss-url": {},
-    "postcss-aspect-ratio-mini": {},
-    "postcss-write-svg": {
-      utf8: false
-    },
-    "postcss-cssnext": {},
-    "postcss-px-to-viewport": {
-      viewportWidth: 750,     //  视窗的宽度，对应的是我们设计稿的宽度，移动端一般是750，如果是pc端那就是类似1920这样的尺寸
-      viewportHeight: 1344,    // 视窗的高度，移动端一般指定1334，也可以不配置
-      unitPrecision: 3,       // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
-      viewportUnit: 'vw',    // 指定需要转换成的视窗单位，建议使用vw
-      selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
-      minPixelValue: 1,      // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
-      mediaQuery: false      // 允许在媒体查询中转换`px`
-    },
-    "postcss-viewport-units":{},
-    "cssnano": {
-      preset: "default", // 设置成default将不会启用autoprefixer
-      "postcss-zindex": false
+const path = require('path');
+
+module.exports = ({
+  file
+}) => {
+  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
+  return {
+    plugins: {
+      autoprefixer: {},
+      "postcss-px-to-viewport": {
+        unitToConvert: "px",
+        viewportWidth: designWidth,
+        propList: ["*"],
+        unitPrecision: 3, // 转换后的精度，即小数点位数
+        viewportUnit: "vw",
+        fontViewportUnit: "vw",
+        selectorBlackList: [],
+        landscapeUnit: 'vh', // 横屏时使用的单位
+        landscapeWidth: 667, // 横屏时使用的视口宽度
+        selectorBlackList: [], // 指定不转换为视窗单位的类名
+        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
+        mediaQuery: true,
+        exclude: [],
+        landscape: false
+      }
     }
   }
-}
+
+}

src/views/teamList/index.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="teamList">
+        <van-nav-bar title="列表" left-text="返回" left-arrow @click-left="onClickLeft" />
         <div v-if="list.data.length>0" class="moneyRanking">
             <p class="title">{{this.$route.query.level_id | capitalize2}}</p>
             <div class="list">
@@ -29,9 +30,7 @@
 <script>
     import data from "@/api/data.js";
     import {
-        Tab,
-        Tabs,
-        Empty
+        NavBar
     } from 'vant';
     export default {
         data() {
@@ -49,6 +48,9 @@
                 id: '',
             }
         },
+        components: {
+            "van-nav-bar": NavBar
+        },
         filters: {
             capitalize: function (val) {
                 return (+val || 0).toFixed(0).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
@@ -76,6 +78,9 @@
             this.getList()
         },
         methods: {
+            onClickLeft() {
+                this.$router.go(-1)
+            },
             async getList() {
                 const res = await data.poxyList({
                     type: this.$route.query.type,
@@ -125,7 +130,21 @@
         min-height: 100vh;
         background: RGBA(63, 66, 88, 1);
         position: relative;
-
+        ::v-deep .van-nav-bar__content{
+            background: RGBA(63, 66, 88, 1);
+        }
+        ::v-deep .van-nav-bar__title{
+            color: #fff;
+        }
+        ::v-deep .van-nav-bar__text{
+            color: #fff;
+        }
+        ::v-deep .van-icon-arrow-left::before{
+            color: #fff;
+        }
+        ::v-deep .van-hairline--bottom::after{
+            border: none;
+        }
         .empty {
             position: absolute;
             top: 20%;

src/views/teamPerformance/index.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="dataOverview">
+        <van-nav-bar title="团队信息" left-text="返回" left-arrow @click-left="onClickLeft" />
         <div class="top">
             <p class="title">2021年总业绩</p>
             <p class="money">¥{{list.year_count | capitalize}}</p>
@@ -120,7 +121,7 @@
                     <div class="teamInfo">
                         <div class="teamName">{{item.username}}</div>
                         <div class="teamMoney">{{list.today_month}}月打款业绩：{{item.team_integral | capitalize}}</div>
-                        <div class="teamNum">团队人数：{{item.team_num}}</div>
+                        <div class="teamNum">注册时间：{{item.created_at | time}}</div>
                     </div>
                 </div>
             </div>
@@ -129,28 +130,40 @@
 </template>
 <script>
     import data from "@/api/data.js";
+    import {
+        NavBar
+    } from 'vant';
     export default {
         name: "dataOverview",
+        components: {
+            "van-nav-bar": NavBar
+        },
         data() {
             return {
                 list: {},
-                id:'',
+                id: '',
             }
         },
         filters: {
             capitalize: function (val) {
                 return (+val || 0).toFixed(0).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
             },
+            time: function (val) {
+                return val.substring(0, 10);
+            },
         },
         created() {
             this.id = this.$route.query.lid
-            console.log(this.id,'-----------------');
+            console.log(this.id, '-----------------');
             this.getData()
         },
         methods: {
+            onClickLeft() {
+                this.$router.go(-1)
+            },
             async getData() {
                 const res = await data.overviewByUserId({
-                    user_id:this.id,
+                    user_id: this.id,
                 });
                 this.list = res.data
                 console.log(this.list, '---this.list');
@@ -161,7 +174,7 @@
                     query: {
                         type: type,
                         level_id: id,
-                        id:this.id,
+                        id: this.id,
                     }
                 })
             },
@@ -171,7 +184,22 @@
 <style lang="scss" scoped>
     .dataOverview {
         background: #3C3F50;
-
+        
+        ::v-deep .van-nav-bar__content{
+            background: RGBA(63, 66, 88, 1);
+        }
+        ::v-deep .van-nav-bar__title{
+            color: #fff;
+        }
+        ::v-deep .van-nav-bar__text{
+            color: #fff;
+        }
+        ::v-deep .van-icon-arrow-left::before{
+            color: #fff;
+        }
+        ::v-deep .van-hairline--bottom::after{
+            border: none;
+        }
         .top {
             width: 750px;
             height: 334px;

vue.config.js

@@ -1,29 +1,4 @@
 module.exports = {
-    css: {
-        loaderOptions: {
-            postcss: {
-                plugins: [
-                    require("postcss-px-to-viewport")({
-                        unitToConvert: "px", // 要转化的单位
-                        viewportWidth: 750, // UI设计稿的宽度
-                        unitPrecision: 3, // 转换后的精度，即小数点位数
-                        propList: [
-                            "*"
-                        ], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
-                        viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
-                        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
-                        landscapeUnit: 'vh', // 横屏时使用的单位
-                        landscapeWidth: 667, // 横屏时使用的视口宽度
-                        selectorBlackList: [], // 指定不转换为视窗单位的类名
-                        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
-                        mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
-                        replace: true, // 是否转换后直接更换属性值
-                        // landscape: false, // 是否处理横屏情况
-                    })
-                ]
-            }
-        },
-    },
     lintOnSave: false,
     // devServer: {
     //     proxy: {  //配置跨域