活动

ybf_admin/.env

 # 所有环境默认
 
 # 页面 title 前缀
-VUE_APP_TITLE=D2Admin
+VUE_APP_TITLE = 亿百分
 
 # 网络请求公用地址
 VUE_APP_API=/api/

ybf_admin/.env.development

 # 开发环境
 
 # 页面 title 前缀
-# VUE_APP_TITLE=D2Admin Dev
-VUE_APP_TITLE=亿百分
+# VUE_APP_TITLE= D2Admin Dev
+VUE_APP_TITLE = 亿百分

ybf_admin/src/App.vue

@@ -25,6 +25,7 @@
 </script>
 
 <style lang="scss">
-  @import '~@/assets/style/public-class.scss';
-
+@import '~@/assets/style/public-class.scss';
+@import '~@/assets/style/button/index.scss';
+@import '~@/assets/style/pagination/index.scss';
 </style>

ybf_admin/src/assets/style/button/index.scss

+.searchs{
+  height: 40px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin:16px 0 20px 0;
+  .buttons{
+    width: 266px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+  .buttonlight {
+    width: 88px;
+    height: 32px;
+    background-color: #e8e9fe;
+    color: #4e59c7;
+    border: 1px solid #4e59c7;
+    box-sizing: border-box;
+    margin-top: 4px;
+    &:hover{
+      background-color: rgba(78, 89, 199, 0.8);
+      color: #fff;
+    }
+  }
+  .buttondark {
+    width: 88px;
+    height: 32px;
+    background-color: #4e59c7;
+    color: #ffffff;
+    border: 1px solid #4e59c7;
+    box-sizing: border-box;
+    margin-top: 4px;
+    &:hover{
+      background-color: rgba(78, 89, 199, 0.8);
+      color: #fff;
+    }
+  }
+
+}

ybf_admin/src/assets/style/pagination/index.scss

+.el-pagination{
+  position: absolute;
+  bottom:00px;
+  right: 30px;
+}
+
+/*修改滚动条样式*/
+div::-webkit-scrollbar{
+  width:10px;
+  height:10px;
+  /**/
+}
+div::-webkit-scrollbar-track{
+  background: rgb(239, 239, 239);
+  border-radius:2px;
+}
+div::-webkit-scrollbar-thumb{
+  background: #bfbfbf;
+  border-radius:10px;
+}
+div::-webkit-scrollbar-thumb:hover{
+  background: #555;
+}
+div::-webkit-scrollbar-corner{
+  background: #179a16;
+}
+.el-table.list{
+  .el-button--text{
+    color: #666666;
+    font-weight: normal;
+    &:hover{
+      color: #333333;
+    }
+    &.listButtonRed{
+      color: #D0021B;
+      &:hover{
+        color: red;
+      }
+    }
+  }
+}

ybf_admin/src/assets/style/public-class.scss

@@ -55,3 +55,7 @@ $sizes: (0, 5, 10, 15, 20);
 .#{$prefix}-pr { padding-right: 20px !important; }
 .#{$prefix}-pb { padding-bottom: 20px !important; }
 .#{$prefix}-pl { padding-left: 20px !important; }
+
+.pRelative{
+  position: relative;
+}

ybf_admin/src/assets/style/theme/d2/setting.scss

@@ -4,12 +4,13 @@ $theme-name: 'd2';
 $theme-bg-color: #ebf1f6;
 // 主题背景图片遮罩
 $theme-bg-mask: rgba(#000, 0);
+$theme-border-color: #EEEEEE;
 
 // container组件
 $theme-container-background-color: rgba(#FFF, 1);
 $theme-container-header-footer-background-color: #FFF;
-$theme-container-border-inner: 1px solid #cfd7e5;
-$theme-container-border-outer: 1px solid #cfd7e5;
+$theme-container-border-inner: 1px solid $theme-border-color;
+$theme-container-border-outer: 1px solid $theme-border-color;
 
 $theme-multiple-page-control-color: $color-text-normal;
 $theme-multiple-page-control-color-active: #2f74ff;

ybf_admin/src/assets/style/theme/theme-base.scss

@@ -288,16 +288,13 @@
               display: flex;
               flex-direction: column;
               overflow: hidden;
+              padding: 16px;
               .d2-container-full__header {
-                padding: 20px;
+                padding:0 16px 16px 16px;
               }
               .d2-container-full__body {
                 flex-grow: 1;
-                // height: 100%;
-                // Z-style
-                // border: 2px solid red;
                 height: 100%;
-                padding: 20px 20px;
                 overflow: auto;
                 position: relative;
               }

ybf_admin/src/assets/style/theme/theme.scss

@@ -296,15 +296,14 @@
           // [组件]
           // d2-container-full 填充型
           .d2-container-full {
-            border: $theme-container-border-outer;
-            border-top: none;
-            border-bottom: none;
+            background-color: $theme-container-header-footer-background-color;
             .d2-container-full__header {
               border-bottom: $theme-container-border-inner;
               background: $theme-container-header-footer-background-color;
+
             }
             .d2-container-full__body {
-              background: $theme-container-background-color;
+              //background: $theme-container-background-color;
             }
             .d2-container-full__footer {
               border-top: $theme-container-border-inner;

ybf_admin/src/pages/goods/main/index.vue

 <template>
-  <d2-container>
-    <template slot="header">header</template>
-    goods/main/index.vue
-    <template slot="footer">footer</template>
+  <d2-container class="pRelative">
+    <template slot="header">
+       全部商品（ 共5个 ）
+    </template>
+    <div class="searchs">
+      <div class="buttons">
+        <el-button class="button buttonlight" size="small">添加商品</el-button>
+        <el-button class="button buttondark" size="small">批量删除</el-button>
+      </div>
+      <!-- 搜索区 -->
+      <el-form class="searchzone" :inline="true" :model="formData" label-width="auto">
+        <el-form-item label="状态">
+          <el-select
+            size="small"
+            v-model="formData.status"
+            placeholder="请选择状态"
+            style="width:160px;"
+          >
+            <el-option
+              v-for="item in  statusList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="">
+          <el-input
+            size="small"
+            v-model="formData.keys"
+            style="width:160px"
+            placeholder="请输入关键词"
+          />
+        </el-form-item>
+        <el-button class="button buttondark" size="small">搜索</el-button>
+      </el-form>
+    </div>
+    <el-table :data="data"  class="list"  style="width: 100%"  empty-text="暂无商品信息" height="calc(100% - 120px)">
+      <el-table-column type="selection" width="55"> </el-table-column>
+      <el-table-column prop="name" label="商品图片"></el-table-column>
+      <el-table-column prop="name" label="商品名称"></el-table-column>
+      <el-table-column prop="name" label="商品价格"></el-table-column>
+      <el-table-column prop="name" label="库存"></el-table-column>
+      <el-table-column prop="name" label="佣金"></el-table-column>
+      <el-table-column prop="message" label="状态"></el-table-column>
+      <!-- 查看详情 -->
+      <el-table-column
+        fixed="right"
+        align="center"
+        label="操作"
+        width="140"
+        @selection-change="listPick">
+        <template slot-scope="scope">
+          <el-button type="text"  @click="">详情</el-button>
+          <el-button type="text"  @click="">编辑</el-button>
+          <el-button type="text"  @click="" class="listButtonRed">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page="page.currentPage"
+      :page-size="page.size"
+      layout="total, prev, pager, next, jumper"
+      :total="page.total">
+    </el-pagination>
   </d2-container>
 </template>
+<script>
+  export default {
+    data () {
+      return {
+        formData:{
+          status:'',
+          keys:''
+        },
+        statusList:[],
+        data: [
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+            forbidEdit: true,
+            showEditButton: true
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄',
+            forbidEdit: false,
+            showEditButton: true
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄',
+            forbidEdit: false,
+            showEditButton: false
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+            forbidEdit: false,
+            showEditButton: true
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+            forbidEdit: false,
+            showEditButton: true
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+            forbidEdit: false,
+            showEditButton: true
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+            forbidEdit: false,
+            showEditButton: true
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+            forbidEdit: false,
+            showEditButton: true
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+            forbidEdit: false,
+            showEditButton: true
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+            forbidEdit: false,
+            showEditButton: true
+          },
+        ],
+        page:{
+          currentPage:1,
+          size:20,
+          total:100
+        }
+      }
+    },
+    methods: {
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+      },
+      listPick() {
+      },
+    }
+  }
+</script>
+<style lang="scss">
+
+</style>

ybf_admin/src/pages/in/contact/mail.vue

@@ -389,57 +389,13 @@ main {
   flex-direction: column;
   justify-content: flex-start;
 }
-.searchs {
-  /* // border: 2px solid red; */
-  height: 40px;
-  width: 100%;
-
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-.buttons {
-  /* // border: 2px solid darkcyan;
-  // width: 30%;
-  // min-width: 266px; */
-  width: 266px;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-}
-.buttonlight {
-  width: 88px;
-  height: 32px;
-  margin-top: 4px;
-  background-color: #e8e9fe;
-  color: #4e59c7;
-  border: 1px solid #4e59c7;
-  box-sizing: border-box;
-}
-.buttonlight:hover {
-}
-.buttondark {
-  width: 88px;
-  height: 32px;
-  background-color: #4e59c7;
-  color: #ffffff;
-  border: 1px solid #4e59c7;
-  box-sizing: border-box;
-  margin-top: 4px;
-}
-.buttondark:hover {
-}
 .searchzone {
-  /* // border: 2px solid orange; */
   height: 40px;
   width: auto;
   min-width: 654px;
 }
 .lists {
-  /* // border: 2px solid greenyellow; */
   height: auto;
-  /* // min-height: 400px; */
   min-height: 70%;
   width: 100%;
   margin-top: 20px;