修改志愿者端样式

1 year ago · 1ec77b5255
parent 905ebdbbbf
commit 1ec77b5255
11 changed files with 301 additions and 45 deletions
--- a/src/assets/images/close.png
+++ b/src/assets/images/close.png
--- a/src/assets/images/huodong.png
+++ b/src/assets/images/huodong.png
--- a/src/assets/styles/font.css
+++ b/src/assets/styles/font.css
@ -5,4 +5,9 @@
@font-face {
  font-family: "Alibaba-PuHuiTi-Regular";
  src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Regular.otf");
+}
+
+@font-face {
+  font-family: "Alibaba PuHuiTi";
+  src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Regular.otf");
 }
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@ -0,0 +1,87 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: JC9527
+ * @Date: 2023-09-20 14:14:24
+ * @LastEditors: JC9527
+ * @LastEditTime: 2023-09-20 14:40:07
+-->
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :show-close="false"
+    :destroy-on-close="true"
+    :close-on-click-modal="false"
+    append-to-body
+    custom-class="dialog-boxed"
+    width="30%"
+  >
+    <div class="dialog-slot">
+      <div class="closeClick">
+        <div class="newplan">
+          <div class="line"></div>
+          <div class="span">新增计划</div>
+        </div>
+        <img src="@/assets/images/close.png" alt="" @click="Close" />
+      </div>
+      <slot></slot>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+    }
+  },
+  methods:{
+    open() {
+      this.dialogVisible = true;
+    },
+    Close() {
+      this.dialogVisible = false;
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.dialog-slot {
+  .closeClick {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 10px 20px;
+    width: 100%;
+    z-index: 1000;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    background: #f8f9fa;
+    box-shadow: 0px 1px 0px 0px #dbe0e8;
+    background-color: #e0eaf8;
+    img {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+    .newplan {
+      display: flex;
+      align-items: center;
+      .line {
+        margin-right: 10px;
+        width: 5px;
+        height: 16px;
+        background-color: #1e70de;
+      }
+      .span {
+        font-size: 16px;
+        font-family: "Alibaba PuHuiTi";
+        font-weight: bold;
+        color: #1e70de;
+      }
+    }
+  }
+}
+</style>
--- a/src/views/components/myInput/index.vue
+++ b/src/views/components/myInput/index.vue
@ -1,3 +1,11 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: JC9527
+ * @Date: 2023-09-20 11:28:27
+ * @LastEditors: JC9527
+ * @LastEditTime: 2023-09-20 14:03:23
+-->
 <template>
  <div class="my-inputs">
    <el-input v-model="input" placeholder="请输入内容"></el-input>
@ -23,7 +31,7 @@ export default {
  display: flex;
  ::v-deep .el-input {
    width: 515px;
-    height: 40px;
+    height: 50px;
    .el-input__inner {
      width: 100%;
      height: 100%;
@ -37,7 +45,7 @@ export default {
    align-items: center;
    justify-content: center;
    width: 52px;
-    height: 40px;
+    height: 50px;
    border-radius: 0 4px 4px 0;
    background-color: #F8414D;
    cursor: pointer;
--- a/src/views/volunteer/activityRecommend/index.vue
+++ b/src/views/volunteer/activityRecommend/index.vue
@ -4,7 +4,7 @@
 * @Author: JC9527
 * @Date: 2023-09-18 10:08:30
 * @LastEditors: JC9527
- * @LastEditTime: 2023-09-18 16:21:18
+ * @LastEditTime: 2023-09-20 13:35:08
 -->
 <template>
  <div class="plan-management">
@ -59,13 +59,13 @@ export default {
    display: flex;
    align-items: center;
    justify-content: space-between;
-    padding: 10px 0 0 0;
+    padding: 40px 0 0 0;
    ::v-deep .el-tabs--top {
      height: 40px;
    }
  }
  .plan-bottomBox {
-    margin-top: 10px;
+    margin-top: 30px;
  }
 }
 </style>
--- a/src/views/volunteer/components/invite.vue
+++ b/src/views/volunteer/components/invite.vue
@ -4,7 +4,7 @@
      <el-table
        :data="tableData"
        :border="false"
-        :height="555"
+        :height="505"
        v-loading="loading"
        tooltip-effect="light"
        :row-class-name="tableRowClassName"
@ -197,7 +197,7 @@ export default {
      }
    }
    td {
-      height: 42px;
+      height: 57px;
      box-sizing: border-box;
      // text-align: center;
      font-size: 14px;
@ -207,7 +207,7 @@ export default {
      padding: 2px 0;
    }
    th {
-      height: 45px;
+      height: 57px;
      background-color: #F7F5F5;
      font-size: 15px;
      font-family: 'Alibaba PuHuiTi';
--- a/src/views/volunteer/components/recommend.vue
+++ b/src/views/volunteer/components/recommend.vue
@ -4,7 +4,7 @@
      <el-table
        :data="tableData"
        :border="false"
-        :height="555"
+        :height="505"
        v-loading="loading"
        tooltip-effect="light"
        :row-class-name="tableRowClassName"
@ -201,7 +201,7 @@ export default {
      }
    }
    td {
-      height: 42px;
+      height: 57px;
      box-sizing: border-box;
      // text-align: center;
      font-size: 14px;
@ -211,7 +211,7 @@ export default {
      padding: 2px 0;
    }
    th {
-      height: 45px;
+      height: 57px;
      background-color: #F7F5F5;
      font-size: 15px;
      font-family: 'Alibaba PuHuiTi';
--- a/src/views/volunteer/conversionRecord/index.vue
+++ b/src/views/volunteer/conversionRecord/index.vue
@ -4,7 +4,7 @@
 * @Author: JC9527
 * @Date: 2023-09-18 10:08:30
 * @LastEditors: JC9527
- * @LastEditTime: 2023-09-18 15:34:55
+ * @LastEditTime: 2023-09-20 14:53:05
 -->
 <template>
  <div class="plan-management">
@ -16,7 +16,7 @@
        <el-table
          :data="tableData"
          :border="false"
-          :height="555"
+          :height="505"
          v-loading="loading"
          tooltip-effect="light"
          :row-class-name="tableRowClassName"
@ -76,13 +76,73 @@
        <my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
      </div>
    </div>
+    <my-dialog ref="conversion">
+      <div class="conversionInfo">
+        <div class="basicInfo">
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="">
+            <span>活动详情</span>
+          </div>
+          <div class="info">
+            <div class="lists">
+              <div class="list-left">
+                <div>活动名称：</div>
+                <div>交通指挥</div>
+              </div>
+              <div class="list-right">
+                <div>活动参与日期：</div>
+                <div>2023年7月9日</div>
+              </div>
+            </div>
+            <div class="lists">
+              <div class="list-left">
+                <div>活动地址：</div>
+                <div>苏州</div>
+              </div>
+              <div class="list-right">
+                <div>服务时长：</div>
+                <div>10h</div>
+              </div>
+            </div>
+            <div class="lists">
+              <div class="list-left">
+                <div>证书状态：</div>
+                <div>已发放</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="logisticsInfo">
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="">
+            <span>物流信息</span>
+          </div>
+          <div class="info">
+            <div class="lists">
+              <div class="list-left">
+                <div>寄件人：</div>
+                <div>XXXXXXXXX</div>
+              </div>
+              <div class="list-right">
+                <div>寄件地址：</div>
+                <div>XXXXXXXXXXX</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="btns">
+          <div class="btn" @click="close">关闭</div>
+        </div>
+      </div>
+    </my-dialog>
  </div>
 </template>
 <script>
 import myPagination from "@/views/components/myPagination/index.vue"
 import myInput from "@/views/components/myInput/index.vue"
+import myDialog from "@/views/components/dialog/index.vue"
 export default {
-  components:{myPagination,myInput},
+  components:{myPagination,myInput,myDialog},
  data() {
    return {
      tableData: [
@ -172,6 +232,14 @@ export default {
        return '';
      }
    },
+    // 查看详情
+    look(item){
+      this.$refs.conversion.open()
+    },
+    // 关闭
+    close(){
+      this.$refs.conversion.Close()
+    }
  },
  async created() {

@ -187,10 +255,10 @@ export default {
  border-radius: 10px 10px 0 0;
  box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
  .plan-topBox {
-    padding: 10px 0 0 0;
+    padding: 40px 0 0 0;
  }
  .plan-bottomBox {
-    margin-top: 10px;
+    margin-top: 30px;
    .tables {
      ::v-deep .el-table {
        .success-row {
@ -218,7 +286,7 @@ export default {
          }
        }
        td {
-          height: 42px;
+          height: 57px;
          box-sizing: border-box;
          // text-align: center;
          font-size: 14px;
@ -228,7 +296,7 @@ export default {
          padding: 2px 0;
        }
        th {
-          height: 45px;
+          height: 57px;
          background-color: #F7F5F5;
          font-size: 15px;
          font-family: 'Alibaba PuHuiTi';
@ -269,4 +337,74 @@ export default {
    }
  }
 }
+::v-deep .conversionInfo {
+  .basicInfo,.logisticsInfo {
+    .title {
+      display: flex;
+      align-items: center;
+      img {
+        width: 16px;
+        margin-right: 10px;
+      }
+      span {
+        font-size: 18px;
+        font-family: 'Alibaba PuHuiTi';
+        font-weight: bold;
+        color: #4C4949;
+      }
+    }
+    .info {
+      margin-top: 20px;
+      display: grid;
+      grid-column: 1fr;
+      grid-row-gap: 20px;
+      .lists {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .list-left,.list-right {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          div {
+            &:nth-child(1) {
+              font-size: 16px;
+              font-family: 'Alibaba PuHuiTi';
+              font-weight: 400;
+              color: #4C4949;
+            }
+            &:nth-child(2) {
+              font-size: 16px;
+              font-family: 'Alibaba PuHuiTi';
+              font-weight: 400;
+              color: #807A7A;
+            }
+          }
+        }
+      }
+    }
+  }
+  .logisticsInfo {
+    margin-top: 30px;
+  }
+  .btns {
+    margin-top: 30px;
+    display: flex;
+    justify-content: flex-end;
+    div {
+      width: 80px;
+      height: 36px;
+      border: 1px solid #F8414D;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      font-family: 'Alibaba PuHuiTi';
+      font-weight: 400;
+      color: #F8414D;
+      cursor: pointer;
+    }
+  }
+}
 </style>
--- a/src/views/volunteer/integralConversion/index.vue
+++ b/src/views/volunteer/integralConversion/index.vue
@ -4,7 +4,7 @@
 * @Author: JC9527
 * @Date: 2023-09-18 10:08:30
 * @LastEditors: JC9527
- * @LastEditTime: 2023-09-19 13:44:43
+ * @LastEditTime: 2023-09-20 14:01:56
 -->
 <template>
  <div class="mainBox">
@ -86,27 +86,27 @@ export default {
  padding: 0 20px 10px 20px;
  box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
  .convert-topBox {
-    padding: 10px 0 0 0;
+    padding: 40px 0 0 0;
  }
  .convert-content {
    .integral-lists {
      // display: flex;
      // flex-wrap: wrap;
-      margin-top: 10px;
+      margin-top: 30px;
      display: grid;
-      grid-template-columns: repeat(4, 290px);
-      grid-column-gap: 40px;
-      grid-row-gap: 10px;
+      grid-template-columns: repeat(5, 300px);
+      grid-column-gap: 30px;
+      grid-row-gap: 30px;
      .list {
        width: 300px;
-        height: 275px;
+        // height: 305px;
        // background: linear-gradient(0deg, #EFE6D9, #DDC9AC);
        box-shadow: 0px 3px 15px 0px rgba(184,184,184,0.22);
        border-radius: 10px;
        .list-top {
          background: url('../../../assets/images/icon1.png') no-repeat center center;
          background-size: 100% 100%;
-          height: 238px;
+          height: 216px;
          width: 100%;
        }
        .top-two {
@ -121,7 +121,7 @@ export default {
          display: flex;
          justify-content: space-between;
          align-items: center;
-          padding: 2px 20px;
+          padding: 20px 20px;
          .bottom-left {
            font-size: 16px;
            font-family: FZDaBiaoSong-B06S;
@ -142,7 +142,7 @@ export default {
      }
    }
    .pagination {
-      margin-top: 5px;
+      margin-top: 45px;
    }
  }
 }
--- a/src/views/volunteer/integralGain/index.vue
+++ b/src/views/volunteer/integralGain/index.vue
@ -4,7 +4,7 @@
 * @Author: JC9527
 * @Date: 2023-09-18 10:08:30
 * @LastEditors: JC9527
- * @LastEditTime: 2023-09-18 11:33:57
+ * @LastEditTime: 2023-09-20 13:57:07
 -->
 <template>
  <div class="plan-management">
@ -16,7 +16,7 @@
        <el-table
          :data="tableData"
          :border="false"
-          :height="555"
+          :height="505"
          v-loading="loading"
          tooltip-effect="light"
          :row-class-name="tableRowClassName"
@ -67,7 +67,7 @@
                  <img src="@/assets/images/look.png" alt="">
                  <span>查看</span>
                </div>
-                <div><span>评估评分：</span></div>
+                <div class="score">评估评分：<span class="span" :class="scope.row.score < 60 ? 'pass':''">{{ scope.row.score }}</span></div>
              </div>
            </template>
          </el-table-column>
@ -91,52 +91,62 @@ export default {
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
-          time:'2023-08-14'
+          time:'2023-08-14',
+          score:98,
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
-          time:'2023-08-14'
+          time:'2023-08-14',
+          score:98,
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
-          time:'2023-08-14'
+          time:'2023-08-14',
+          score:98,
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
-          time:'2023-08-14'
+          time:'2023-08-14',
+          score:98,
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
-          time:'2023-08-14'
+          time:'2023-08-14',
+          score:58,
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
-          time:'2023-08-14'
+          time:'2023-08-14',
+          score:98,
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
-          time:'2023-08-14'
+          time:'2023-08-14',
+          score:98,
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
-          time:'2023-08-14'
+          time:'2023-08-14',
+          score:98,
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
-          time:'2023-08-14'
+          time:'2023-08-14',
+          score:48,
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
-          time:'2023-08-14'
+          time:'2023-08-14',
+          score:98,
        },
      ],
      input: '',
@ -188,10 +198,10 @@ export default {
  border-radius: 10px 10px 0 0;
  box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
  .plan-topBox {
-    padding: 10px 0 0 0;
+    padding: 40px 0 0 0;
  }
  .plan-bottomBox {
-    margin-top: 10px;
+    margin-top: 30px;
    .tables {
      ::v-deep .el-table {
        .success-row {
@ -219,7 +229,7 @@ export default {
          }
        }
        td {
-          height: 42px;
+          height: 57px;
          box-sizing: border-box;
          // text-align: center;
          font-size: 14px;
@ -229,7 +239,7 @@ export default {
          padding: 2px 0;
        }
        th {
-          height: 45px;
+          height: 57px;
          background-color: #F7F5F5;
          font-size: 15px;
          font-family: 'Alibaba PuHuiTi';
@ -263,6 +273,14 @@ export default {
            color: #045FFD;
          }
        }
+        .score {
+          .span {
+            color: #2AA984;
+          }
+          .pass {
+            color: #F38447;
+          }
+        }
      }
    }
    .pagination {