app

src/App.vue

@@ -20,7 +20,11 @@
       </keep-alive>
     </transition>
     <!-- 底部导航 -->
-    <footer-nav v-if="isShowNav" :luyou="this.$store.state.luyou" :nCount="this.$store.state.nCount"></footer-nav>
+    <footer-nav
+      v-if="isShowNav"
+      :luyou="this.$store.state.luyou"
+      :nCount="this.$store.state.nCount"
+    ></footer-nav>
   </div>
 </template>
 
@@ -184,6 +188,8 @@ body {
   font-size: 0.85rem;
   top: 50%;
   transform: translate(0, -50%);
+  display: flex;
+  align-items: center;
 }
 .pb_left span {
   width: auto;

src/components/pages/find.vue

@@ -1,133 +1,79 @@
 <template>
   <div class="pb_content">
     <div class="pb_head">
-      <span>发现</span>
+      <span>创新</span>
+      <div class="pb_left" @click="goTo('release')">
+        <img
+          style="width: 1.2rem"
+          v-lazy="require('../../assets/icon/camera.png')"
+          alt=""
+        />
+      </div>
     </div>
     <div class="pb_content_body">
-      <div class="find_head" v-if="false">
-        <div class="find_tabs">
-          <div :class="{ active: show }" @click="show = true">发现</div>
-          <div :class="{ active: !show }" @click="show = false">作品推荐</div>
-        </div>
-      </div>
-      <div class="find_content">
-        <div v-if="show">
-          <van-pull-refresh
-            v-model="refreshing"
-            @refresh="onRefresh"
-            looing-text="释放刷新"
-            pulling-text="下拉刷新"
-          >
-            <!-- -->
-            <van-list
-              v-model="loading"
-              :finished="finished"
-              finished-text="没有更多啦"
-              offset="10"
-              :immediate-check="false"
-              @load="onLoad"
-            >
-              <van-empty
-                class="custom-image"
-                :image="require('../../assets/icon/custom-empty-image.png')"
-                description="暂无数据"
-                v-if="isShow"
-              />
-              <div
-                class="hs_content_body van-hairline--top"
-                v-for="(item, index) in res2"
-                :key="index"
-                @click="goTo('/find/findDetail?id=' + item.id)"
+      <div class="find_head">最新推荐</div>
+      <div class="find_content" v-for="x in 10" :key="x">
+        <div class="find_box" @click="goTo('findDetail')">
+          <div class="find_box_head">
+            <div class="find_imgbox">
+              <img v-lazy="require('../../assets/tu8.png')" alt="" />
+            </div>
+            <div class="find_headT">
+              <span>林小凡</span>
+              <span>2021-10-30 10:44</span>
+            </div>
+          </div>
+          <div class="find_ct van-ellipsis">大家一起植树啦</div>
+          <div class="find_cc van-ellipsis">
+            春季万物复苏，建议您带孩子走进大自然，用相机记录下精彩瞬间
+          </div>
+          <div class="find_cImgbox">
+            <div class="find_cImg">
+              <van-image
+                width="3rem"
+                height="3rem"
+                fit="cover"
+                :src="require('../../assets/tu8.png')"
               >
-                <div class="hs_title">
-                  <div class="van-ellipsis">
-                    <span>{{ item.title }}</span>
-                  </div>
-                  <div class="van-multi-ellipsis--l2">
-                    <span v-html="snippet(item.content)"></span>
-                  </div>
-                </div>
-                <div class="img-box" v-if="item.poster">
-                  <van-image
-                    width="100%"
-                    height="5rem"
-                    fit="cover"
-                    :src="item.poster"
-                  >
-                    <template v-slot:loading>
-                      <van-loading type="spinner" size="20" />
-                    </template>
-                    <template v-slot:error>加载失败</template>
-                  </van-image>
-                </div>
-              </div>
-            </van-list>
-          </van-pull-refresh>
-        </div>
-        <div class="myw_work_body" v-else>
-          <van-pull-refresh
-            style="padding-top:.5rem"
-            v-model="refreshing1"
-            @refresh="onRefresh1"
-            looing-text="释放刷新"
-            pulling-text="下拉刷新"
-          >
-            <van-list
-              v-model="loading1"
-              :finished="finished1"
-              finished-text="没有更多啦"
-              offset="10"
-              :immediate-check="false"
-              @load="onLoad1"
-            >
-              <van-empty
-                class="custom-image"
-                :image="require('../../assets/icon/custom-empty-image.png')"
-                description="暂无数据"
-                v-if="isShow1"
-              />
-              <div
-                class="myw_work_contentBox van-hairline--top"
-                v-for="(res, index) in res"
-                :key="index"
-               @click="goTo('/class/classWork?id='+res.id)"
+                <template v-slot:loading>
+                  <van-loading type="spinner" size="20" />
+                </template>
+                <template v-slot:error>加载失败</template> </van-image
+              ><van-image
+                width="3rem"
+                height="3rem"
+                fit="cover"
+                :src="require('../../assets/tu8.png')"
               >
-                <div class="myw_work_content">
-                  <div class="myw_work_head">
-                    <div class="myw_work_title">
-                      <span>{{ res.workName }}</span
-                      ><span>{{ res.time }}</span>
-                    </div>
-                    <div class="myw_work_rate">
-                      <van-rate
-                        :value="res.rrate"
-                        void-icon="star"
-                        void-color="#e6e6e6"
-                        color="#ff6823"
-                        readonly
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div class="myw_work_imgbox">
-                  <div class="myw_work_img">
-                    <!-- <img :src="res.imgUrl" alt="" /> -->
-                             <van-image
-                    width="100%"
-                    height="6rem"
-                    fit="cover"
-                    :src="res.imgUrl"
-                  >
-                    <template v-slot:loading>
-                      <van-loading type="spinner" size="20" />
-                    </template>
-                    <template v-slot:error>加载失败</template>
-                  </van-image>
-                  </div>
-                </div>
+                <template v-slot:loading>
+                  <van-loading type="spinner" size="20" />
+                </template>
+                <template v-slot:error>加载失败</template>
+              </van-image>
+            </div>
+            <div class="find_comment">
+              <div>
+                <img
+                  v-lazy="require('../../assets/icon/comment.png')"
+                  alt=""
+                /><span>3</span>
+              </div>
+              <div>
+                <img
+                  v-lazy="require('../../assets/icon/zan.png')"
+                  alt=""
+                /><span>6</span>
               </div>
-            </van-list>
-          </van-pull-refresh>
+            </div>
+          </div>
+          <div class="find_commentInput">
+            <van-search
+              v-model="value"
+              shape="round"
+              placeholder="点这里评论"
+              left-icon=""
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -136,331 +82,104 @@
 
 <script>
 export default {
-  name:"main-keep-alive",
+  name: "main-keep-alive",
   data() {
-    return {
-      show: true,
-      res2: [],
-      loading: false,
-      finished: false,
-      refreshing: false,
-      page: 1,
-      loading1: false,
-      finished1: false,
-      refreshing1: false,
-      page1: 1,
-      isShow: true,
-      isShow1: true,
-      res: [],
-    };
+    return {};
   },
   methods: {
     goTo(path) {
       this.$router.push(path);
     },
-    //在method里面写方法
-    snippet(value) {
-      return value.replace(/<[^>]*>/g, "");
-    },
-    tabClick(index) {},
-
-     //查询作品推荐
-    getWorkI() {
-      this.loading1 = true;
-      let params = { page: this.page1 };
-      this.ajax
-        .get(this.$store.state.api + "getWrokI", params)
-        .then((res) => {
-          if (res.data[0].length == 0) {
-            this.isShow1 = true;
-          } else {
-            this.isShow1 = false;
-          }
-          this.page1++;
-          this.loading1 = false;
-          this.refreshing1 = false;
-          this.finished1 = false;
-          res.data[0].filter((element) => {
-            element.imgUrl = JSON.parse(element.content).photo.split(",")[0];
-
-            var el = JSON.parse(element.chapters).homework;
-            for (var i = 0; i < el.length; i++) {
-              if (el[i].hid == element.homeworkid) {
-                element.workName = el[i].name + "-" + element.name;
-              }
-            }
-            if (element.rate) {
-              var rate = JSON.parse(element.rate);
-              element.rrate = Math.round(
-                (rate.ca + rate.sia + rate.eta + rate.pia + rate.lra) / 5
-              );
-            } else {
-              element.rrate = 0;
-            }
-            return element;
-          });
-          this.res = res.data[0];
-          console.log(this.res2);
-        })
-        .catch((err) => {
-          this.loading1 = false;
-          this.refreshing1 = false;
-          console.error(err);
-        });
-    },
-    onRefresh1() {
-      this.page1 = 1;
-      this.getWorkI();
-    },
-    onLoad1() {
-      let params = { page: this.page1 };
-      this.ajax
-        .get(this.$store.state.api + "getWrokI", params)
-        .then((res) => {
-          this.page1++;
-          this.loading1 = false;
-          this.refreshing1 = false;
-          res.data[0].filter((element) => {
-            element.imgUrl = JSON.parse(element.content).photo.split(",")[0];
-
-            var el = JSON.parse(element.chapters).homework;
-            for (var i = 0; i < el.length; i++) {
-              if (el[i].hid == element.homeworkid) {
-                element.workName = el[i].name + "-" + element.name;
-              }
-            }
-            if (element.rate) {
-              var rate = JSON.parse(element.rate);
-              element.rrate = Math.round(
-                (rate.ca + rate.sia + rate.eta + rate.pia + rate.lra) / 5
-              );
-            } else {
-              element.rrate = 0;
-            }
-            return element;
-          });
-          this.res = this.res.concat(res.data[0]);
-          var num = this.res.length ? this.res[0].num : 0;
-          if (this.res.length < num) {
-            this.page++;
-            this.loading1 = false;
-          } else {
-            this.finished1 = true;
-            this.loading1 = true;
-          }
-        })
-        .catch((err) => {
-          this.loading1 = false;
-          this.refreshing1 = false;
-          console.error(err);
-        });
-    },
-
-    //查询发现
-    getFind() {
-      this.loading = true;
-      let params = { page: this.page };
-      this.ajax
-        .get(this.$store.state.api + "getFind", params)
-        .then((res) => {
-          if (res.data[0].length == 0) {
-            this.isShow = true;
-          } else {
-            this.isShow = false;
-          }
-          this.page++;
-          this.loading = false;
-          this.refreshing = false;
-          this.finished = false;
-          this.res2 = res.data[0];
-          console.log(this.res2);
-        })
-        .catch((err) => {
-          this.loading = false;
-          this.refreshing = false;
-          console.error(err);
-        });
-    },
-    onRefresh() {
-      this.page = 1;
-      this.getFind();
-    },
-    onLoad() {
-      let params = { page: this.page };
-      this.ajax
-        .get(this.$store.state.api + "getFind", params)
-        .then((res) => {
-          this.page++;
-          this.loading = false;
-          this.refreshing = false;
-          this.res2 = this.res2.concat(res.data[0]);
-          var num = this.res2.length ? this.res2[0].num : 0;
-          if (this.res2.length < num) {
-            this.page++;
-            this.loading = false;
-          } else {
-            this.finished = true;
-            this.loading = true;
-          }
-        })
-        .catch((err) => {
-          this.loading = false;
-          this.refreshing = false;
-          console.error(err);
-        });
-    },
-
-  },
-  activated() {
-    this.page = 1;
-    this.getFind();
-    // this.page1 = 1;
-    // this.getWorkI();
   },
+  activated() {},
 };
 </script>
 
 <style scoped>
-.custom-image >>> .van-empty__image {
-  width: 4.5rem;
-  height: auto;
-  /* height: 6.4rem; */
-}
-.van-hairline--top::after {
-  border-top-width: 2px;
-}
-.van-hairline--top:nth-child(1)::after {
-  border-top-width: 0px;
-}
-.img-box {
-  border-radius: 3px;
-  overflow: hidden;
-  width: 5rem;
-  height: 3.8rem;
-  /* margin: 0 auto; */
-  /* box-shadow: #c8c8c8 0px 0px 10px 4px; */
-  flex-grow: 1;
-}
-
-.hs_content {
-  margin-top: 1rem;
-}
-.hs_content_body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 95%;
-  margin: 0 auto;
-  padding: 0.8rem 0;
-}
-.hs_title {
-  flex-grow: 2;
-  width: 60%;
-}
-.hs_title div:nth-child(1) {
-  font-size: 0.8rem;
-  font-weight: 600;
-}
-.hs_title div:nth-child(2) {
-  font-size: 0.68rem;
-  margin-top: 0.5rem;
-  color: #4c4c4c;
-}
-.pb_content_body {
-  background: #fff;
-}
 .find_head {
-  padding: 1rem 0 0;
-  /* position: sticky;
-  top: 3rem;background: #fff;
-  z-index: 999; */
+  color: #656565;
+  width: 93%;
+  margin: 0.5rem auto;
+  font-family: "黑体";
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+.find_box {
+  padding: 0.5rem 1rem;
+  background: #fff;
+  width: 93%;
+  margin: 0 auto 0.3rem;
+  border-radius: 1rem;
+  box-shadow: 0 0 10px #d8d8d8;
+  box-sizing: border-box;
 }
-.find_tabs {
+.find_box_head {
   display: flex;
-  justify-content: center;
+  margin: 0 auto 0.5rem;
   align-items: center;
-  font-size: 0.73rem;
-  border-radius: 5px;
-  height: 1.8rem;
-  background: rgb(208, 208, 208);
-  margin: 0rem auto 0.5rem;
-  width: 50%;
-  text-align: center;
-  color: #fff;
+}
+.find_imgbox {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 2rem;
+  /* background: green; */
   overflow: hidden;
-  line-height: 1.8rem;
+  margin-right: 0.5rem;
 }
-.find_tabs div {
-  width: 50%;
+.find_imgbox img {
+  width: 100%;
   height: 100%;
 }
-
-.active {
-  background: rgb(81, 201, 154);
+.find_headT {
+  display: flex;
+  flex-direction: column;
 }
-
-.find_content {
+.find_headT span:first-child {
+  font-size: 0.75rem;
 }
-
-.myw_work_body {
-  background: #fff;
+.find_headT span:last-child {
+  font-size: 0.6rem;
+  color: #c4c4c4;
+}
+.find_ct {
+  color: #57ae6d;
+  font-size: 0.9rem;
 }
-.myw_work_contentBox {
-  padding: 0.5rem 0;
-  width: 95%;
-  margin: 0 auto;
+.find_cc {
+  font-size: 0.8rem;
 }
-.myw_work_content {
+.find_cImgbox {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  margin: 0.3rem 0 0;
 }
-.myw_work_head {
+.find_cImg {
 }
-.myw_work_title {
+.find_cImg div {
+  margin-right: 0.5rem;
 }
-.myw_work_title span:nth-child(1) {
+.find_comment {
+  display: flex;
+  align-items: flex-end;
   font-size: 0.8rem;
 }
-.myw_work_title span:nth-child(2) {
-  font-size: 0.65rem;
-  margin-left: 0.5rem;
-  color: #7e7e7e;
+.find_comment div:first-child {
+  margin-right: 1rem;
 }
-.myw_work_rate {
+.find_comment img {
+  width: 1.3rem;
+  margin-right: 0.2rem;
 }
-/* .myw_work_button {
+.find_comment div {
+  display: flex;
+  align-items: flex-end;
 }
-.myw_work_button button {
-  color: white;
-  border: none;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  font-size: 1rem;
-  text-align: center;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: opacity 0.2s;
-  height: 1.4rem;
-  font-size: 0.7rem;
-  line-height: 1.4rem;
-  background: rgb(81, 201, 154);
-  padding: 0 1rem;
-} */
-.myw_work_imgbox {
-  margin: 0.3rem 0 0 0;
+.find_commentInput {
 }
-.myw_work_img {
-  border-radius: 5px;
-  overflow: hidden;
-  min-width: 8rem;
-  width: 10rem;
-  height: 6rem;
-  box-shadow: #c8c8c8 0px 0px 10px 4px;
+.find_commentInput >>> .van-search {
+  padding: 10px 0px;
 }
-.myw_work_img img {
-  width: inherit;
-  height: inherit;
+.find_commentInput >>> .van-search__content {
+  background: #f2f2f2;
 }
 </style>

src/components/pages/findDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pb_content2" style="background: #fff">
+  <div class="pb_content2">
     <div class="pb_head">
       <van-icon
         name="arrow-left"
@@ -10,7 +10,76 @@
       />
       <span>创新</span>
     </div>
-    <div class="pb_content_body"></div>
+    <div class="pb_content_body">
+      <div class="fd_box">
+        <div class="find_box_head">
+          <div class="find_imgbox">
+            <img v-lazy="require('../../assets/tu8.png')" alt="" />
+          </div>
+          <div class="find_headT">
+            <span>林小凡</span>
+            <span>2021-10-30 10:44</span>
+          </div>
+        </div>
+        <div class="find_ct">大家一起植树啦</div>
+        <div class="find_cc">
+          植树造林不仅可以绿化和美化家园，同时还可以起到扩大山林资源、防止水土流失、保护农田、调节气候、促进经济发展等作用，是一项利于当代、造福子孙的宏伟工程。为了保护林业资源，美化环境，保持生态平衡，世界上很多国家都根据本国实际情况设立了植树节。随着人们的环保意识不断增强，并积极投身植树造林活动，我们人类生存的环境将会得到不断的改善。
+          国外曾有学者对树的生态价值进行过计算：一棵50年树龄的树，产生氧气的价值约31200美元；吸收有毒气体、防止大气污染价值约62500美元；增加土壤肥力价值约31200美元；涵养水源价值37500美元；为鸟类及其他动物提供繁衍场所价值31250美元；产生蛋白质价值2500美元。除去花、果实和木材价值，总计创值约196000美元。
+          这一计算是否精确姑且不论，就树木的实用价值而言，确是显而易见的。
+        </div>
+        <div class="find_image">
+          <van-image
+            width="auto"
+            height="auto"
+            fit="cover"
+            :src="require('../../assets/tu8.png')"
+          >
+            <template v-slot:loading>
+              <van-loading type="spinner" size="20" />
+            </template>
+            <template v-slot:error>加载失败</template>
+          </van-image>
+        </div>
+        <div class="find_comment">
+          <div>
+            <img
+              v-lazy="require('../../assets/icon/comment.png')"
+              alt=""
+            /><span>3</span>
+          </div>
+          <div>
+            <img v-lazy="require('../../assets/icon/zan.png')" alt="" /><span
+              >6</span
+            >
+          </div>
+        </div>
+        <div class="fd_cBox">
+          <div class="fd_cBox_t">评论:</div>
+          <div class="fd_cBox_comment">
+            <div class="find_imgbox">
+              <img v-lazy="require('../../assets/tu8.png')" alt="" />
+            </div>
+            <van-search
+              v-model="value"
+              shape="round"
+              placeholder="点这里评论"
+              left-icon=""
+            />
+          </div>
+          <div class="fd_cBox_commentBox">
+            <div class="fd_cBox_commentBox_content">
+              <div class="find_imgbox">
+                <img v-lazy="require('../../assets/tu8.png')" alt="" />
+              </div>
+              <div class="fd_cBox_commentBox_c">
+                <div>小明家长</div>
+                <div>真不错呢~<span>09.09</span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -34,4 +103,119 @@ export default {
 </script>
 
 <style scoped>
+.fd_box {
+  padding: 0.5rem 1rem;
+  background: #fff;
+  width: 93%;
+  margin: 0.5rem auto 0.3rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 10px #d8d8d8;
+  box-sizing: border-box;
+}
+.find_box_head {
+  display: flex;
+  margin: 0 auto 0.5rem;
+  align-items: center;
+}
+.find_imgbox {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 2rem;
+  /* background: green; */
+  overflow: hidden;
+  margin-right: 0.5rem;
+}
+.find_imgbox img {
+  width: 100%;
+  height: 100%;
+}
+.find_headT {
+  display: flex;
+  flex-direction: column;
+}
+.find_headT span:first-child {
+  font-size: 0.75rem;
+}
+.find_headT span:last-child {
+  font-size: 0.6rem;
+  color: #c4c4c4;
+}
+.find_ct {
+  color: #57ae6d;
+  font-size: 0.9rem;
+}
+.find_cc {
+  font-size: 0.7rem;
+  margin-top: 0.5rem;
+}
+
+.find_image {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.find_image div {
+  margin-top: 0.5rem;
+}
+.find_comment {
+  display: flex;
+  align-items: flex-end;
+  font-size: 0.8rem;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+  border-bottom: 2px solid #eee;
+  padding-bottom: 0.5rem;
+}
+.find_comment div {
+  display: flex;
+  align-items: flex-end;
+}
+.find_comment div:first-child {
+  margin-right: 1rem;
+}
+.find_comment img {
+  width: 1.3rem;
+  margin-right: 0.2rem;
+}
+
+.fd_cBox {
+  padding: 0.5rem 0;
+}
+
+.fd_cBox_t {
+  font-size: 0.68rem;
+}
+.fd_cBox_comment {
+  display: flex;
+  align-items: center;
+}
+
+.fd_cBox_comment >>> .van-search {
+  width: calc(100% - 2.3rem);
+  padding: 10px 0px;
+}
+
+.fd_cBox_commentBox {
+  padding: 0 0.5rem;
+}
+.fd_cBox_commentBox_content {
+  display: flex;
+  align-items: center;
+}
+.fd_cBox_commentBox_c {
+    font-size: .75rem;
+}
+.fd_cBox_commentBox_c div:first-child{
+    color: rgb(172, 172, 172);
+    font-size: .7rem;
+}
+.fd_cBox_commentBox_c div:last-child{
+    display: flex;
+    align-items: flex-end;
+}
+.fd_cBox_commentBox_c div span{
+    font-size: .6rem;
+    color: rgb(204, 204, 204);
+    margin-left: .3rem;
+}
 </style>

src/components/pages/learning.vue

@@ -1,19 +1,13 @@
 <template>
-  <div class="pb_content">
+  <div class="pb_content" style="background: #24833d">
     <div class="pb_head">
-      <span>学习中心</span>
-    </div>
-    <div class="pb_content_body">
-      <div class="li_search">
-        <van-search
-          v-model="searchValue"
-          placeholder="想学什么..."
-          @input="onSearch"
-          background=" rgba(243, 243, 243)"
-          class="search_input"
-        />
+      <span>五育融合</span>
+      <div class="pb_left">
+        <span style="font-size: .1rem;">我的任务</span>
       </div>
-      <div class="li_head" @click="goTo('/my/myClass')">
+    </div>
+    <div class="pb_content_body" style="height: calc(100% - 3rem)">
+      <div class="li_head">
         <div class="li_head_portal">
           <img
             v-lazy="
@@ -25,99 +19,24 @@
           />
         </div>
         <div class="li_head_body">
-          <div class="li_myClass">我的课程</div>
-          <div class="li_count">
-            目前共有<span>{{ Num }}</span
-            >个课程在实践
+          <div class="li_myClass">
+            <div>{{ name }}</div>
+            <div>
+              <span>{{ className }}</span> <span>{{ schoolName }}</span>
+            </div>
           </div>
         </div>
-        <van-icon name="share" color="#46bb65" class="li_share" />
       </div>
-      <div class="recommend-class-box">
-        <div class="recommend-class-title" refs="titleBtn">
-          <!-- <button @click="getCourse('111', $event)">学科融合智慧创</button>
-          <button @click="getCourse('111', $event)">农耕劳动研中学</button>
-          <button @click="getCourse('111', $event)">Ai劳动创意show</button>
-          <button @click="getCourse('111', $event)">家校劳动幸福约</button>
-          <button @click="getCourse('111', $event)">劳模精神认真学</button>
-          <button @click="getCourse('111', $event)">基地劳动实践行</button>
-          <button @click="getCourse('111', $event)">职业体验快乐做</button>
-          <button @click="getCourse('111', $event)">小小义工志愿行</button> -->
-          <button
-            v-for="item in groupList"
-            :key="item.id"
-            @click="getCourse(item.id, $event)"
-          >
-            {{ item.name }}
-          </button>
+      <div class="xi_content">
+        <div class="learn_box">
+          <img v-lazy="require('../../assets/icon/leiIcon.png')" alt="" />
+          <span>雷达图分析</span>
         </div>
-        <div class="recommend-class-button" v-if="groupid">
-          <button :class="{ active: classX == '' }" @click="onSearch1('')">
-            所有年级
-          </button>
-          <button
-            v-for="item in classListX"
-            :key="item.id"
-            :class="{ active: classX == item.id }"
-            @click="onSearch1(item.id)"
-          >
-            {{ item.name }}
-          </button>
+        <div>
+          <div>
+            <van-image :src="require('../../assets/a.png')" fit="contain" />
+          </div>
         </div>
-        <van-pull-refresh
-          style="padding-top: 1rem"
-          v-model="refreshing"
-          @refresh="onRefresh"
-          looing-text="释放刷新"
-          pulling-text="下拉刷新"
-        >
-          <van-list
-            v-model="loading"
-            :finished="finished"
-            finished-text="没有更多啦"
-            offset="10"
-            :immediate-check="false"
-            @load="onLoad"
-          >
-            <van-empty
-              class="custom-image"
-              :image="require('../../assets/icon/custom-empty-image.png')"
-              description="暂无数据"
-              v-if="isShow"
-            />
-            <van-row type="flex" v-else>
-              <van-col
-                span="12"
-                v-for="(banner, index) in bannerP"
-                :key="index"
-                @click="goTo('/class?cid=' + banner.courseId, banner.courseId)"
-              >
-                <div class="recommend-box">
-                  <div class="img-box">
-                    <van-image
-                      width="100%"
-                      height="5rem"
-                      fit="cover"
-                      :src="banner.imgUrl"
-                    >
-                      <template v-slot:loading>
-                        <van-loading type="spinner" size="20" />
-                      </template>
-                      <template v-slot:error>加载失败</template>
-                    </van-image>
-                  </div>
-                  <div class="van-multi-ellipsis--l2 class-title">
-                    {{ banner.title }}
-                  </div>
-                  <div class="class-view">
-                    <i></i>
-                    <span>{{ banner.vcount }}</span>
-                  </div>
-                </div>
-              </van-col>
-            </van-row>
-          </van-list>
-        </van-pull-refresh>
       </div>
     </div>
   </div>
@@ -128,222 +47,34 @@ export default {
   name: "main-keep-alive",
   data() {
     return {
-      loading: false,
-      finished: false,
-      refreshing: false,
-      searchValue: "",
-      // isActive: false,
-      page: 1,
-      groupid: "",
-      isShow: false,
-      groupList: [],
-      Num: 0,
       smailheadportrait: this.$store.state.userInfo.smailheadportrait,
-      bannerP: [],
-      classX: "",
-      classListX: "",
+      name: this.$store.state.userInfo.name,
+      className: this.$store.state.userInfo.classnameA,
+      schoolName: this.$store.state.userInfo.schoolName,
     };
   },
   methods: {
-    onSearch() {
-      this.page = 1;
-      this.getCourse();
-    },
-    onSearch1(id) {
-      this.page = 1;
-      this.classX = id
-      this.getCourse();
-    },
     goTo(path, cid) {
-      if (cid) {
-        let params = [{ cid: cid }];
-        this.ajax
-          .post(this.$store.state.api + "addCourseCount", params)
-          .then((res) => {
-            this.$router.push(path);
-          })
-          .catch((err) => {
-            console.error(err);
-          });
-      } else {
-        this.$router.push(path);
-      }
-    },
-    //获取在学课程数量
-    getNum() {
-      let params = { uid: this.$store.state.userInfo.userid };
-      this.ajax
-        .get(this.$store.state.api + "getNum", params)
-        .then((res) => {
-          this.Num = res.data[0][0].courseNum;
-          console.log(res.data[0][0]);
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    },
-    //获取课程
-    getCourse(groupid, e) {
-      if (groupid) {
-        this.page = 1;
-        var e = e.target;
-        if (document.querySelector(".Tactive") && e.className == "") {
-          document.querySelector(".Tactive").className = "";
-          e.className = "Tactive";
-          this.groupid = groupid;
-        } else if (e.className != "") {
-          e.className = "";
-          this.groupid = "";
-        } else if (e.className == "") {
-          e.className = "Tactive";
-          this.groupid = groupid;
-        }
-        this.getGPop();
-      }
-      this.loading = true;
-      let params = {
-        jid: this.$store.state.userInfo.classid,
-        gid: this.groupid,
-        class: this.classX,
-        cn: this.searchValue,
-        page: this.page,
-      };
-      this.ajax
-        .get(this.$store.state.api + "getCourse", params)
-        .then((res) => {
-          if (res.data[0].length == 0) {
-            this.isShow = true;
-          } else {
-            this.isShow = false;
-          }
-          this.page++;
-          this.loading = false;
-          this.refreshing = false;
-          this.finished = false;
-          // res.data[0].forEach((element) => {
-          //   element.imgUrl = require("../../assets/tu8.png");
-          // });
-          var resA = [];
-          if (res.data[0].length > 0) {
-            resA = res.data[0].filter((element) => {
-              element.imgUrl = JSON.parse(element.chapters).poster;
-              return element;
-            });
-          }
-          this.bannerP = resA;
-          // this.bannerP = this.bannerP.concat(res.data[0]);
-        })
-        .catch((err) => {
-          this.loading = false;
-          this.refreshing = false;
-          console.error(err);
-        });
-    },
-    onRefresh() {
-      this.page = 1;
-      this.getCourse();
+      this.$router.push(path);
     },
-    //获取分组分类
-    getGroup() {
-      let params = {};
-      this.ajax
-        .get(this.$store.state.api + "getGroup", params)
-        .then((res) => {
-          this.groupList = res.data[0];
-          console.log(this.groupList);
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    },
-    onLoad() {
-      let params = {
-        jid: this.$store.state.userInfo.classid,
-        gid: this.groupid,
-        class: this.classX,
-        cn: this.searchValue,
-        page: this.page,
-      };
-      this.ajax
-        .get(this.$store.state.api + "getCourse", params)
-        .then((res) => {
-          this.loading = false;
-          this.refreshing = false;
-          console.log(res.data[0][0]);
-          res.data[0].forEach((element) => {
-            element.imgUrl = require("../../assets/tu8.png");
-          });
-          var resA = [];
-          if (res.data[0].length > 0) {
-            resA = res.data[0].filter((element) => {
-              element.imgUrl = JSON.parse(element.chapters).poster;
-              return element;
-            });
-          }
-          this.bannerP = this.bannerP.concat(resA);
-          var num = this.bannerP.length ? this.bannerP[0].num : 0;
-          if (this.bannerP.length < num) {
-            this.page++;
-            this.loading = false;
-          } else {
-            this.finished = true;
-            this.loading = true;
-          }
-        })
-        .catch((err) => {
-          this.loading = false;
-          this.refreshing = false;
-          console.error(err);
-        });
-    },
-    getGPop() {
-      if (this.groupid) {
-        this.classX = "";
-        let params = { pid: this.groupid };
-        this.ajax
-          .get(this.$store.state.api + "getGroupGrade", params)
-          .then((res) => {
-            this.classListX = res.data[0];
-          })
-          .catch((err) => {
-            console.error(err);
-          });
-      } else {
-        this.classX = "";
-        this.classListX = "";
-      }
-    },
-  },
-  activated() {
-    this.page = 1;
-    this.getCourse();
-    this.getGroup();
-    this.getNum();
   },
+  activated() {},
 };
 </script>
 
 <style scoped>
-.li_search {
-}
-.custom-image >>> .van-empty__image {
-  width: 4.5rem;
-  height: auto;
-  /* height: 6.4rem; */
-}
-.van-search__content {
-  background: #fff !important;
-}
 .li_head {
-  background: #fff;
-  margin-bottom: 1rem;
+  background: #40aa5c;
+  margin-bottom: 0rem;
   display: flex;
   justify-content: start;
   padding: 1rem 0;
   position: relative;
+  align-items: center;
 }
 .li_head_portal {
   height: 3rem;
+  min-width: 3rem;
   width: 3rem;
   overflow: hidden;
   border-radius: 10rem;
@@ -354,185 +85,41 @@ export default {
   height: inherit;
 }
 .li_head_body {
-  margin-left: 0.5rem;
+  margin-left: 0.2rem;
 }
 .li_myClass {
   font-size: 0.8rem;
-  margin: 0.3rem 0 0 0;
+  color: #fff;
+  /* margin: 0.3rem 0 0 0; */
   /* font-weight: 600; */
 }
-.li_count {
-  font-size: 0.7rem;
-  color: #a0a0a0;
-  margin: 0.3rem 0 0 0;
-}
-.li_count span {
-  color: #ff6823;
-}
-.li_share {
-  position: absolute;
-  right: 1rem;
-  top: 50%;
-  transform: translate(0, -50%);
-}
-.recommend-class-box {
-  background: #fff;
-  margin: 0.4rem 0 0 0;
-  padding: 0.3rem 0 0 0;
-  position: relative;
-}
-.recommend-class-title {
-  display: flex;
-  /* justify-content: center; */
-  width: 95%;
-  margin: 0 auto;
-  overflow-x: auto;
-  height: 5.8rem;
-  flex-direction: column;
-  flex-wrap: wrap;
-  padding-bottom: 0rem;
-}
-.recommend-class-title .Tactive {
-  background: rgb(30, 105, 52) !important;
+.li_myClass div:first-child {
+  margin-bottom: 0.5rem;
 }
-
-.recommend-class-title::-webkit-scrollbar {
-  width: 0;
+.li_myClass span:first-child {
+  margin-left: 0rem;
 }
-.recommend-class-title button {
-  color: white;
-  border: none;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  font-size: 1rem;
-  text-align: center;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: opacity 0.2s;
-  height: 2rem;
-  /* width: 6rem; */
-  font-size: 0.75rem;
-  line-height: 2rem;
-  padding: 0 0.5rem;
-  margin: 0.3rem 0.2rem 0;
-  background: rgb(70, 181, 101);
+.li_myClass span {
+  font-size: 0.7rem;
+  margin-left: 0.5rem;
 }
-
-.recommend-class-button {
-  display: flex;
-  /* justify-content: center; */
+.xi_content {
+  height: calc(100% - 5.8rem);
+  background: #439959;
   width: 100%;
-  margin: 0 auto;
-  overflow-x: auto;
-  height: 2.5rem;
-  align-items: center;
-  /* flex-direction: column; */
-  /* flex-wrap: wrap; */
-  flex-direction: row;
-  flex-wrap: nowrap;
-  background: #eaeaea;
-  align-items: center;
-  white-space: nowrap;
-}
-.recommend-class-button button {
-  /* color: white; */
-  border: none;
+  margin-top: 0.8rem;
+  padding: 0.2rem 0 0 0;
   box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  font-size: 1rem;
-  text-align: center;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: opacity 0.2s;
-  height: 1.5rem;
-  /* width: 6rem; */
-  font-size: 0.75rem;
-  line-height: 1.5rem;
-  padding: 0 0.5rem;
-  margin: 0rem 0.2rem 0;
-  background: #eaeaea;
-  border: 1px solid rgb(26, 130, 228);
-  color: rgb(26, 130, 228);
-}
-.recommend-class-button .active {
-  background: rgb(26, 130, 228);
-  color: white;
-}
-
-.recommend-class-title button:nth-child(1) {
-  background: rgb(70, 187, 101);
-}
-.recommend-class-title button:nth-child(2) {
-  background: rgb(149, 200, 249);
-}
-.recommend-class-title button:nth-child(3) {
-  background: rgb(232, 207, 132);
-}
-.recommend-class-title button:nth-child(4) {
-  background: rgb(244, 155, 181);
-}
-.recommend-class-title button:nth-child(5) {
-  background: rgb(255, 164, 123);
-}
-.recommend-class-title button:nth-child(6) {
-  background: rgb(151, 223, 194);
 }
-.recommend-class-title button:nth-child(7) {
-  background: #f58383;
-}
-.recommend-class-title button:nth-child(8) {
-  background: #ccacf8;
-}
-.recommend-class-title button:nth-child(9) {
-  background: #b1e884;
-}
-.recommend-class-title button:nth-child(10) {
-  background: #95c8f9;
-}
-.recommend-box {
-  margin-bottom: 0.4rem;
-}
-.img-box {
-  border-radius: 5px;
-  overflow: hidden;
-  width: 9rem;
-  height: 5rem;
-  margin: 0 auto;
-  box-shadow: #c8c8c8 0px 0px 10px 4px;
-}
-
-.class-title {
-  font-size: 0.72rem;
-  width: 9rem;
-  margin: 0.2rem auto 0;
-}
-
-.class-view {
-  font-size: 0.6rem;
-  color: #b4b4b4;
-  width: 9rem;
-  margin: 0.2rem auto 0;
+.learn_box {
   display: flex;
   align-items: center;
+  margin: 0.3rem 0 0 0.5rem;
+  color: #a1ccac;
+  font-size: 0.75rem;
 }
-
-.class-view i {
-  background-image: url("../../assets/icon/liulan.png");
+.learn_box img {
   width: 1rem;
-  height: 1rem;
-  background-size: 100% 100%;
-  display: inline-block;
-  float: left;
-  /* margin-top: 1px; */
-  line-height: 1rem;
-  vertical-align: text-top;
-  background-repeat: no-repeat;
-}
-
-.class-view span {
-  height: 1rem;
-  line-height: 1rem;
+  margin-right: 0.3rem;
 }
 </style>

src/components/pages/my.vue

@@ -1,319 +1,242 @@
 <template>
-  <div class="pb_content">
-    <div class="my_head">
-      <div class="head_position" @click="goTo('/my/myDetail')">
-        <div class="li_head_portal">
-          <img
-            v-lazy="
-              smailheadportrait
-                ? smailheadportrait
-                : require('../../assets/icon/portal.png')
-            "
-            alt=""
-          />
-        </div>
-        <div class="my_userName">
-          <span>{{ name ? name : "用户" }}</span
-          ><span>{{ this.$store.state.userInfo.classnameA }}</span>
-        </div>
-        <van-icon name="arrow" color="#fff" size="1.2rem" class="my_info" />
+  <div class="pb_content" style="background: #fff">
+    <div class="pb_head">
+      <span>我的</span>
+    </div>
+    <div class="pb_content_body" style="height: calc(100% - 3rem)">
+      <div class="my_nav">
+        <div :class="{ active: type == 1 }" @click="setType(1)">全部任务</div>
+        <div :class="{ active: type == 2 }" @click="setType(2)">家庭校园</div>
+        <div :class="{ active: type == 3 }" @click="setType(3)">义工社团</div>
+        <div :class="{ active: type == 4 }" @click="setType(4)">五育融合</div>
+        <div :class="{ active: type == 5 }" @click="setType(5)">创新</div>
       </div>
-      <div class="my_panel">
-        <div @click="goTo('/my/myClass')">
-          <div>
-            <span>{{ NumList ? NumList.courseNum : 0 }}</span>
+      <div class="my_navBox">
+        <div v-if="type == 1" class="nav">
+          <div
+            class="my_wordBox"
+            v-for="x in 20"
+            :key="x"
+            @click="goTo('myWorkDetail')"
+          >
+            <div class="my_wordBox_title">
+              <div class="my_wordBox_titlet">
+                <img v-lazy="require('../../assets/icon/word.png')" alt="" />
+                <span class="van-ellipsis">绿色快乐农耕园</span>
+              </div>
+              <span>详情></span>
+            </div>
+            <div class="my_wordBox_content van-multi-ellipsis--l3">
+              生活中多数家长认为，孩子身心健康、聪明、爱学习是第一位的，相比之下，动手操作一些生活中的“小事”没那么重要。其实，劳动蕴含着重要的“学习价值”，劳动也是一种学习。它能够为孩子提供丰富的感知、操作机会，使他在各种操作活动中获得认知发展；还能锻炼各种能力，帮助孩子养成良好的生活习惯，培养责任感和良好品质。
+            </div>
+            <div class="my_wordBox_bottom">
+              <div>09-24 18:00</div>
+              <div :class="{ finish: x != 2 }">
+                {{ x != 2 ? "已完成" : "未完成" }}
+              </div>
+            </div>
           </div>
-          <div><span>课程</span></div>
         </div>
-        <div class="van-hairline--left my_border_left"></div>
-        <div @click="goTo('/my/myWorks')">
-          <div>
-            <span>{{ NumList ? NumList.workNum : 0 }}</span>
+        <div v-if="type == 2" class="nav">
+          <div
+            class="my_wordBox"
+            v-for="x in 10"
+            :key="x"
+            @click="goTo('myWorkDetail')"
+          >
+            <div class="my_wordBox_title">
+              <div class="my_wordBox_titlet">
+                <img v-lazy="require('../../assets/icon/word.png')" alt="" />
+                <span class="van-ellipsis">绿色快乐农耕园</span>
+              </div>
+              <span>详情></span>
+            </div>
+            <div class="my_wordBox_content van-multi-ellipsis--l3">
+              生活中多数家长认为，孩子身心健康、聪明、爱学习是第一位的，相比之下，动手操作一些生活中的“小事”没那么重要。其实，劳动蕴含着重要的“学习价值”，劳动也是一种学习。它能够为孩子提供丰富的感知、操作机会，使他在各种操作活动中获得认知发展；还能锻炼各种能力，帮助孩子养成良好的生活习惯，培养责任感和良好品质。
+            </div>
+            <div class="my_wordBox_bottom">
+              <div>09-24 18:00</div>
+              <div :class="{ finish: x != 2 }">
+                {{ x != 2 ? "已完成" : "未完成" }}
+              </div>
+            </div>
           </div>
-          <div><span>作品</span></div>
         </div>
-      </div>
-    </div>
-    <div class="my_nav">
-      <van-row>
-        <van-col span="8" @click="goTo('/my/myClass')"
-          ><div class="my_nav_panel">
-            <div class="my_c_green my_c">
-              <img src="../../assets/icon/wodekecheng.png" alt="" />
-            </div>
-            <div>我的课程</div>
-          </div></van-col
-        >
-        <van-col span="8" @click="goTo('/my/myWorks')"
-          ><div class="my_nav_panel">
-            <div class="my_c_orange my_c">
-              <img src="../../assets/icon/wodzuoping.png" />
+        <div v-if="type == 3" class="nav">
+          <div
+            class="my_wordBox"
+            v-for="x in 10"
+            :key="x"
+            @click="goTo('myWorkDetail')"
+          >
+            <div class="my_wordBox_title">
+              <div class="my_wordBox_titlet">
+                <img v-lazy="require('../../assets/icon/word.png')" alt="" />
+                <span class="van-ellipsis">组前分组培训</span>
+              </div>
+              <span>详情></span>
             </div>
-            <div>我的作品</div>
-          </div></van-col
-        >
-        <!-- <van-col span="8"
-          ><div class="my_nav_panel">
-            <div class="my_c_blue my_c">
-              <img src="../../assets/icon/xuexishuju.png" />
+            <div class="my_wordBox_content van-multi-ellipsis--l3">
+              生活中多数家长认为，孩子身心健康、聪明、爱学习是第一位的，相比之下，动手操作一些生活中的“小事”没那么重要。其实，劳动蕴含着重要的“学习价值”，劳动也是一种学习。它能够为孩子提供丰富的感知、操作机会，使他在各种操作活动中获得认知发展；还能锻炼各种能力，帮助孩子养成良好的生活习惯，培养责任感和良好品质。
             </div>
-            <div>学习数据</div>
-          </div></van-col
-        > -->
-        <!-- <van-col span="8"
-          ><div class="my_nav_panel">
-            <div class="my_c_orange my_c">
-              <img src="../../assets/icon/shoucang.png" />
+            <div class="my_wordBox_bottom">
+              <div>09-24 18:00</div>
+              <div :class="{ finish: x != 2 }">
+                {{ x != 2 ? "已完成" : "未完成" }}
+              </div>
             </div>
-            <div>收藏</div>
-          </div></van-col
-        > -->
-        <van-col span="8" @click="goTo('/my/Notice')"
-          ><div class="my_nav_panel">
-            <div class="noticeBox">
-              <span v-if="this.$store.state.nCount != 0"></span>
-              <div class="my_c_blue my_c">
-                <img src="../../assets/icon/xiaoxitongzhi.png" />
+          </div>
+        </div>
+        <div v-if="type == 4" class="nav">
+          <div
+            class="my_wordBox"
+            v-for="x in 3"
+            :key="x"
+            @click="goTo('myWorkDetail')"
+          >
+            <div class="my_wordBox_title">
+              <div class="my_wordBox_titlet">
+                <img v-lazy="require('../../assets/icon/word.png')" alt="" />
+                <span class="van-ellipsis">绿色快乐农耕园</span>
               </div>
+              <span>详情></span>
             </div>
-            <div>消息通知</div>
-          </div></van-col
-        >
-        <van-col span="8"
-          ><div class="my_nav_panel">
-            <div class="my_c_green my_c" @click="goTo('/my/homeSchool')">
-              <img src="../../assets/icon/jiaxioashe.png" />
+            <div class="my_wordBox_content van-multi-ellipsis--l3">
+              生活中多数家长认为，孩子身心健康、聪明、爱学习是第一位的，相比之下，动手操作一些生活中的“小事”没那么重要。其实，劳动蕴含着重要的“学习价值”，劳动也是一种学习。它能够为孩子提供丰富的感知、操作机会，使他在各种操作活动中获得认知发展；还能锻炼各种能力，帮助孩子养成良好的生活习惯，培养责任感和良好品质。
             </div>
-            <div>家校区</div>
-          </div></van-col
-        >
-        <!-- <van-col span="8"
-          ><div class="my_nav_panel">
-            <div class="my_c_purple my_c" @click="goTo('/my/quality')">
-              <img src="../../assets/icon/quality.png" />
+            <div class="my_wordBox_bottom">
+              <div>09-24 18:00</div>
+              <div :class="{ finish: x != 5 }">
+                {{ x != 2 ? "已完成" : "未完成" }}
+              </div>
             </div>
-            <div>素质综合评价</div>
-          </div></van-col
-        >-->
-        <van-col span="8"
-          ><div class="my_nav_panel">
-            <div class="my_c_purple my_c" @click="goTo('/my/studentE')">
-              <img src="../../assets/icon/studentEve.png" />
+          </div>
+        </div>
+        <div v-if="type == 5" class="nav">
+          <div
+            class="my_wordBox"
+            v-for="x in 1"
+            :key="x"
+            @click="goTo('myWorkDetail')"
+          >
+            <div class="my_wordBox_title">
+              <div class="my_wordBox_titlet">
+                <img v-lazy="require('../../assets/icon/word.png')" alt="" />
+                <span class="van-ellipsis">绿色快乐农耕园</span>
+              </div>
+              <span>详情></span>
             </div>
-            <div>学生评价</div>
-          </div></van-col
-        >
-        <van-col span="8"
-          ><div class="my_nav_panel">
-            <div class="my_c_red my_c" @click="goTo('/my/medal')">
-              <img src="../../assets/icon/medal.png" />
+            <div class="my_wordBox_content van-multi-ellipsis--l3">
+              生活中多数家长认为，孩子身心健康、聪明、爱学习是第一位的，相比之下，动手操作一些生活中的“小事”没那么重要。其实，劳动蕴含着重要的“学习价值”，劳动也是一种学习。它能够为孩子提供丰富的感知、操作机会，使他在各种操作活动中获得认知发展；还能锻炼各种能力，帮助孩子养成良好的生活习惯，培养责任感和良好品质。
             </div>
-            <div>勋章与荣誉</div>
-          </div></van-col
-        >
-        <van-col span="8"
-          ><div class="my_nav_panel">
-            <div class="my_c_yellow my_c" @click="goTo('/my/ask')">
-              <img src="../../assets/icon/ask.png" />
+            <div class="my_wordBox_bottom">
+              <div>09-24 18:00</div>
+              <div :class="{ finish: x != 2 }">
+                {{ x != 2 ? "已完成" : "未完成" }}
+              </div>
             </div>
-            <div>问卷调查</div>
-          </div></van-col
-        >
-      </van-row>
-    </div>
-    <div>
-      <van-cell-group>
-        <van-cell
-          title="系统设置"
-          size="large"
-          is-link
-          @click="goTo('/my/system')"
-        />
-        <van-cell
-          title="关于"
-          size="large"
-          is-link
-          @click="goTo('/my/about')"
-        />
-      </van-cell-group>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  // name:"main-keep-alive",
   data() {
     return {
-      smailheadportrait: this.$store.state.userInfo.smailheadportrait,
-      name: this.$store.state.userInfo.name,
-      NumList: [],
+      type: 2,
     };
   },
   methods: {
+    setType(type) {
+      this.type = type;
+    },
     goTo(path) {
       this.$router.push(path);
     },
-    getNum() {
-      let params = { uid: this.$store.state.userInfo.userid };
-      this.ajax
-        .get(this.$store.state.api + "getNum", params)
-        .then((res) => {
-          this.NumList = res.data[0][0];
-          console.log(res.data[0][0]);
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    },
-  },
-  created() {
-    this.getNum();
   },
 };
 </script>
 
 <style scoped>
-.my_head {
-  height: 7rem;
-  background-image: url("../../assets/icon/wode.png");
-  background-size: 100% 100%;
-  text-align: center;
-  /* line-height: 6rem; */
-  color: #fff;
-  font-size: 0.9rem;
-  /* position: fixed; */
-  z-index: 9999;
+.my_nav {
   width: 100%;
-  padding: 1rem 0 0 0;
-}
-.head_position {
   display: flex;
-  justify-content: start;
-  align-items: center;
-  /* margin: 1rem 0 0 0; */
-  position: relative;
-}
-.li_head_portal {
-  height: 3rem;
-  width: 3rem;
-  overflow: hidden;
-  border-radius: 10rem;
-  margin: 0 0 0 1rem;
-}
-.li_head_portal img {
-  width: inherit;
-  height: inherit;
-}
-.my_userName {
-  display: flex;
-  justify-content: center;
-  /* margin: 0 0 1rem 0.8rem; */
-  margin-left: 1rem;
-  align-items: center;
+  font-size: 0.9rem;
+  font-family: "黑体";
+  padding: 0.3rem 0.5rem;
+  box-sizing: border-box;
+  justify-content: space-around;
+  height: 1.8rem;
 }
-.my_userName span:first-child {
-  font-size: 0.85rem;
+
+.my_nav .active {
+  color: #46bb65;
 }
-.my_userName span:last-child {
-  font-size: 0.7rem;
-  margin-left: 0.5rem;
+
+.my_navBox {
+  height: calc(100% - 1.8rem);
 }
-.my_info {
-  position: absolute;
-  right: 1rem;
-  top: 50%;
-  transform: translate(0, -50%);
+.my_navBox .nav {
+  height: 100%;
+  overflow: auto;
 }
-.my_panel {
-  height: 3.5rem;
+.my_wordBox {
+  padding: 1rem 0.6rem;
   background: #fff;
-  border-radius: 5px;
-  position: absolute;
-  width: 85%;
-  left: 50%;
-  transform: translate(-50%, 35%);
-  color: #383838;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 0.8rem;
-  box-shadow: #c8c8c8 0px 0px 10px 0px;
-}
-.my_border_left {
-  height: 70%;
-  width: 1.5px;
-  margin: 0 3.5rem;
+  width: 95%;
+  margin: 0.5rem auto;
+  border-radius: 0.3rem;
+  box-shadow: 0 0 10px #d8d8d8;
+  box-sizing: border-box;
 }
-.van-hairline--left::after {
-  border-left-width: 3px;
-}
-.my_nav {
-  background: #fff;
+
+.my_wordBox_title {
   width: 100%;
-  margin: 1.5rem 0 0.7rem;
-  padding: 0.5rem 0 1rem;
-}
-.my_nav_panel {
   display: flex;
   align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  margin: 1rem 0 0;
-  font-size: 0.8rem;
-  color: #383838;
+  justify-content: space-between;
 }
-.my_nav_panel div:nth-child(2) {
-  margin: 0.3rem 0;
-}
-.my_c {
-  height: 2.2rem;
-  width: 2.2rem;
-  overflow: hidden;
-  border-radius: 10rem;
-  background: #fff;
+.my_wordBox_titlet {
+  width: calc(100% - 2rem);
   display: flex;
   align-items: center;
-  justify-content: center;
-}
-.my_c img {
-  width: 60%;
-  width: 60%;
-}
-.my_c_yellow {
-  background: rgb(245, 223, 119);
 }
-.my_c_green {
-  background: rgb(140, 229, 163);
+.my_wordBox_titlet img {
+  width: 1.3rem;
+  margin-right: 0.5rem;
 }
-.my_c_orange {
-  background: rgb(247, 166, 82);
-}
-.my_c_blue {
-  background: rgb(135, 197, 254);
+.my_wordBox_title .my_wordBox_titlet span {
+  font-size: 0.9rem;
+  font-weight: 600;
 }
-.my_c_purple {
-  background: rgb(236, 135, 254);
+.my_wordBox_title span {
+  font-size: 0.65rem;
 }
-.my_c_red {
-  background: rgb(245, 119, 119);
+.my_wordBox_content {
+  font-size: 0.8rem;
+  color: rgb(134, 134, 134);
+  margin: 0.2rem 0;
 }
 
-.noticeBox {
-  position: relative;
-  /* margin-right: 10px; */
-  height: 2.2rem;
+.my_wordBox_bottom {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
 }
-.noticeBox span {
-  position: absolute;
-  background: red;
-  width: 5px;
-  height: 5px;
-  border-radius: 30px;
-  top: -3px;
-  right: -3px;
+
+.my_wordBox_bottom div:nth-child(1) {
+  font-size: 0.65rem;
+  color: rgb(134, 134, 134);
+}
+
+.my_wordBox_bottom div:nth-child(2) {
+  color: red;
+  font-size: 0.9rem;
+}
+.my_wordBox_bottom .finish {
+  color: #46bb65 !important;
 }
 </style>

src/components/pages/myWorkDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pb_content2" style="background: #fff">
+  <div class="pb_content" style="background: #fff; max-height: 100%">
     <div class="pb_head">
       <van-icon
         name="arrow-left"
@@ -10,7 +10,27 @@
       />
       <span>详情</span>
     </div>
-    <div class="pb_content_body"></div>
+    <div class="pb_content_body">
+      <div class="my_wordBox">
+        <div class="mwd_title">
+          <img v-lazy="require('../../assets/icon/word.png')" alt="" />
+          <span>绿色快乐农耕园</span>
+        </div>
+        <div class="mwd_content">
+          生活中多数家长认为，孩子身心健康、聪明、爱学习是第一位的，相比之下，动手操作一些生活中的“小事”没那么重要。其实，劳动蕴含着重要的“学习价值”，劳动也是一种学习。它能够为孩子提供丰富的感知、操作机会，使他在各种操作活动中获得认知发展；还能锻炼各种能力，帮助孩子养成良好的生活习惯，培养责任感和良好品质。
+        </div>
+        <div class="mwd_img">
+          <img v-lazy="require('../../assets/tu8.png')" alt="" />
+        </div>
+        <div class="mwd_time">
+          <span>09-24 18:00</span>
+        </div>
+        <div class="mwd_comment">
+          <span>老师已评价</span>
+          <span class="finish">已完成</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -34,4 +54,60 @@ export default {
 </script>
 
 <style scoped>
+.my_wordBox {
+  padding: 1rem 0.6rem;
+  background: #fff;
+  width: 95%;
+  margin: 0.5rem auto;
+  border-radius: 0.3rem;
+  box-shadow: 0 0 10px #d8d8d8;
+  box-sizing: border-box;
+}
+.mwd_title {
+  display: flex;
+  align-items: center;
+}
+.mwd_title img {
+  width: 1.3rem;
+  margin-right: 0.5rem;
+}
+.mwd_title span {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.mwd_content {
+  font-size: 0.85rem;
+  color: rgb(134, 134, 134);
+  margin: 0.2rem 0;
+  text-indent: 2em;
+}
+.mwd_img {
+  border-radius: 10px;
+  width: 100%;
+  overflow: hidden;
+}
+.mwd_img img {
+  width: 100%;
+  height: auto;
+  margin: 0.3rem;
+}
+.mwd_time {
+  font-size: 0.65rem;
+  color: rgb(134, 134, 134);
+}
+
+.mwd_comment {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.5rem;
+  font-size: 0.85rem;
+}
+
+.mwd_comment span:last-child {
+  color: red;
+}
+.mwd_comment .finish {
+  color: #46bb65 !important;
+}
 </style>

src/components/pages/release.vue

@@ -9,15 +9,41 @@
         @click="goBack"
       />
       <span>发布内容</span>
+      <div class="pb_left">
+        <span style="font-size: 0.8rem">发布</span>
+      </div>
+    </div>
+    <div class="pb_content_body">
+      <input type="text" placeholder="请输入标题哦..." class="r_input" />
+      <textarea placeholder="请输入内容" class="r_textarea"></textarea>
+      <div class="r_uploadbox">
+        <van-uploader
+          v-model="fileList"
+          :after-read="afterRead"
+          preview-size="5rem"
+          accept="image/*"
+          v-loading="photoLoading"
+        >
+          <img src="../../assets/icon/photo.png" alt="" style="width: 5rem;" />
+          <template #preview-cover>
+            <div class=""></div>
+          </template>
+        </van-uploader>
+      </div>
     </div>
-    <div class="pb_content_body"></div>
   </div>
 </template>
 
 <script>
+import "../../common/aws-sdk-2.235.1.min";
+
 export default {
   data() {
-    return {};
+    return {
+      fileList: [],
+      error: "",
+      photoLoading: false,
+    };
   },
   methods: {
     goBack() {
@@ -29,9 +55,125 @@ export default {
         this.$router.go(-1);
       }
     },
+    //上传图片
+    afterRead(file) {
+      this.photoLoading = true;
+
+      var _file = file.file;
+      file.status = "uploading";
+      file.message = "上传中...";
+
+      var credentials = {
+        accessKeyId: "AKIATLPEDU37QV5CHLMH",
+        secretAccessKey: "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",
+      }; //秘钥形式的登录上传
+      window.AWS.config.update(credentials);
+      window.AWS.config.region = "cn-northwest-1"; //设置区域
+
+      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+      var _this = this;
+
+      var mediaFormatList = ["png", "jpg", "jpeg"];
+
+      if (
+        mediaFormatList.indexOf(
+          _file.name
+            .split(".")
+            [_file.name.split(".").length - 1].toLocaleLowerCase()
+        ) == "-1"
+      ) {
+        _this.$toast.fail("请上传jpg或者png的图片格式文件");
+        _this.fileList = _this.fileList.filter((fileA) => {
+          return fileA.file.lastModified != file.file.lastModified;
+        });
+        file.status = "failed";
+        file.message = "上传失败";
+        this.photoLoading = false;
+
+        return;
+      }
+
+      if (_file) {
+        var params = {
+          Key:
+            _file.name.replace(
+              "." + _file.name.split(".")[_file.name.split(".").length - 1],
+              ""
+            ) +
+            Date.parse(new Date()) +
+            "." +
+            _file.name.split(".")[_file.name.split(".").length - 1],
+          ContentType: _file.type,
+          Body: _file,
+          "Access-Control-Allow-Credentials": "*",
+          ACL: "public-read",
+        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+        var options = {
+          partSize: 2048 * 1024 * 1024,
+          queueSize: 2,
+          leavePartsOnError: true,
+        };
+        bucket
+          .upload(params, options)
+          .on("httpUploadProgress", function (evt) {
+            //这里可以写进度条
+            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+          })
+          .send(function (err, data) {
+            _this.photoLoading = false;
+            if (err) {
+              _this.error = err;
+              _this.$toast.fail("上传失败");
+              file.status = "failed";
+              file.message = "上传失败";
+              //上传错误处理
+              _this.fileList = _this.fileList.filter((fileA) => {
+                return fileA.file.lastModified != _file.lastModified;
+              });
+            } else {
+              //上传成功处理
+              file.status = "success";
+              _this.fileList = _this.fileList.filter((fileA) => {
+                if (fileA.file.lastModified == _file.lastModified) {
+                  fileA.url = data.Location;
+                  return fileA;
+                } else {
+                  return fileA;
+                }
+              });
+              console.log(data.Location);
+            }
+          });
+      }
+    },
   },
 };
 </script>
 
 <style scoped>
+.r_input {
+  width: 93%;
+  margin: 0.5rem auto;
+  display: block;
+  border: none;
+  padding: 5px 2px;
+  border-bottom: 1px solid #adadad;
+  box-sizing: border-box;
+  font-size: 0.9rem;
+}
+.r_textarea {
+  width: 93%;
+  margin: 0.5rem auto;
+  display: block;
+  border: none;
+  padding: 5px 2px;
+  box-sizing: border-box;
+  font-size: 0.85rem;
+  resize: none;
+  height: 8rem;
+}
+.r_uploadbox {
+  width: 93%;
+  margin: 0.5rem auto;
+}
 </style>