Merge branch 'Lvtianfang' of http://39.101.188.84:8000/suzhou-jichuang-lanhai/volunteer-pc into dev

src/assets/styles/font.css

@@ -14,4 +14,9 @@
 @font-face {
   font-family: "youshebiaotihei";
   src: url("./font/YouSheBiaoTiHei-2.ttf");
+}
+
+@font-face {
+  font-family: "Alibaba PuHuiTi";
+  src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Regular.otf");
 }

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>

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;

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>

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';

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';

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>

src/views/volunteer/integralConversion/index.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-09-18 10:08:30
  * @LastEditors: JC9527
- * @LastEditTime: 2023-09-18 16:26:48
+ * @LastEditTime: 2023-09-20 14:01:56
 -->
 <template>
   <div class="mainBox">
@@ -17,7 +17,7 @@
           <div class="list-top" :class="item.type == 1 ? 'top-two' : item.type == 2 ? 'top-three' : '' "></div>
           <div class="list-bottom">
             <span class="bottom-left">{{ item.type == 0 ? '高级' : item.type == 1 ? '中级' : '初级' }}</span>
-            <span class="bottom-right">兑换</span>
+            <span class="bottom-right" @click="conversion(item)">兑换</span>
           </div>
         </div>
       </div>
@@ -62,12 +62,18 @@ export default {
     
   },
   methods: {
+    // 页码切换
     pagesChange(pages){
 
     },
+    // 点击搜索输入框的值
     changeInput(e){
 
-    }
+    },
+    // 点击兑换
+    conversion(item){
+
+    },
   },
 };
 </script>
@@ -80,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 {
@@ -115,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;
@@ -136,7 +142,7 @@ export default {
       }
     }
     .pagination {
-      margin-top: 5px;
+      margin-top: 45px;
     }
   }
 }

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 {