1

src/pages/exam/examPaperList.vue

@@ -26,7 +26,11 @@
           v-for="(item, index) in examList"
           :key="index"
           class="exam-item"
-          :style="{ 'background-image': `url(${item.PicList[0]})` }"
+          :style="{
+            'background-image': item.PicList[0]
+              ? `url(${item.PicList[0]})`
+              : `url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/defaultBgimg.png)`,
+          }"
           @click="
             jumpPage(
               item.PaperId,
@@ -189,7 +193,6 @@ export default {
   border-radius: 20rpx;
   overflow: hidden;
   /* background-color: #333333; */
-  box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;

src/pages/index/index.vue

@@ -54,6 +54,18 @@
           <van-image width="58rpx" height="66rpx" fit="cover" :src="item.img" />
         </view>
       </view>
+      <view class="LearningGarden flex flex_wrap">
+        <view
+          v-for="(item, index) in learnList"
+          :key="index"
+          class="LearningGarden-item"
+          :style="{ backgroundColor: item.bgcolor }"
+        >
+          <view class="LearningGarden-item-name">{{ item.name }}</view>
+          <view class="LearningGarden-item-desc">{{ item.desc }}</view>
+          <image :src="item.img" class="LearningGarden-item-img" />
+        </view>
+      </view>
       <view class="timetable">
         <view class="timetable_item flex flex_between_center">
           <text class="timetable_title">我的课表</text>
@@ -116,7 +128,11 @@
           v-for="(item, index) in indexData.paperList"
           :key="index"
           class="test-item no_shrink"
-          :style="{ 'background-image': `url(${item.PicList[0]})` }"
+          :style="{
+            'background-image': item.PicList[0]
+              ? `url(${item.PicList[0]})`
+              : `url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/defaultBgimg.png)`,
+          }"
           @click="
             jumpPage(
               `/pages/exam/examPaper?GuestId=${item.GuestId}&&PaperId=${item.PaperId}&&Id=${item.Id}&&Exam_Student_Id=${item.Exam_Student_Id}&&ExamStatus=${item.ExamStatus}`
@@ -227,6 +243,21 @@ export default {
           jumpUrl: "/pages/course/askForLeaveList",
         },
       ],
+      // 学习园地
+      learnList: [
+        {
+          name: "日语学习园地",
+          desc: "日本語の勉強",
+          bgcolor: "#F6E5FE",
+          img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/garden1.png",
+        },
+        {
+          name: "韩语学习园地",
+          desc: "정원",
+          bgcolor: "#FEF5D6",
+          img: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/garden2.png",
+        },
+      ],
     });
     let methods = {
       jumpPage(url) {
@@ -460,9 +491,6 @@ export default {
   box-sizing: border-box;
   border-radius: 20rpx;
   overflow: hidden;
-  /* background-color: #333333; */
-  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(36, 36, 36, 0.2);
-  border: 1px solid rgba(36, 36, 36, 0.05);
   margin-right: 30rpx;
   background-repeat: no-repeat;
   background-position: center;
@@ -533,4 +561,43 @@ export default {
 .status-red {
   color: #ff3816;
 }
+.LearningGarden {
+  box-sizing: border-box;
+  margin-bottom: 10rpx;
+}
+.LearningGarden-item {
+  width: 330rpx;
+  height: 140rpx;
+  border-radius: 20rpx;
+  margin-right: 30rpx;
+  margin-bottom: 30rpx;
+  box-sizing: border-box;
+  padding: 30rpx 20rpx;
+  position: relative;
+}
+.LearningGarden .LearningGarden-item:nth-child(2n) {
+  margin-right: 0rpx !important;
+}
+.LearningGarden-item-name {
+  width: 220rpx;
+  font-size: 28rpx;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #0f1b35;
+}
+.LearningGarden-item-desc {
+  width: 220rpx;
+  font-size: 22rpx;
+  font-family: PingFang SC;
+  font-weight: 500;
+  color: #333e52;
+  margin-top: 10rpx;
+}
+.LearningGarden-item-img {
+  width: 64rpx;
+  height: 66rpx;
+  position: absolute;
+  top: 38rpx;
+  right: 20rpx;
+}
 </style>

src/pages/index/index2.vue

-
-
-<script>
-/**  
-	  * 1.因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。
-		如果需要解构 prop，可以通过使用 setup 函数中的 toRefs 来完成此操作
-	  * // ref和reactive的区别: ref()传入的是js的基本数据类型; reactive()中传入的是object普通对象,------------reactive对象不能直接赋值--------------
-	 *@reactive:处理的是对象的双向绑定, 对象不能被***解构或展开***，一旦被解构或者展开，返回的值将失去响应式，需用...toRef()
-	 *  没有this 通过 @getCurrentInstance,获取当前页面实例，使用const { ctx,proxy，refs } = getCurrentInstance(); ctx或proxy.$挂载的方法   
-   * 2.ref 获取子组件实例，组件名首字母小写
-	 */
-import {
-  ref,
-  reactive,
-  toRefs,
-  toRef,
-  getCurrentInstance,
-  watch,
-  computed,
-  onMounted,
-} from "vue";
-export default {
-  name: "",
-  props: {},
-  components: {},
-  setup(props) {
-    let { ctx } = getCurrentInstance();
-    let data = ref(0);
-    let name = reactive({
-      firstname: "x",
-      lastname: "w",
-    });
-    // 第一个参数: 要监听的响应式对象
-    // 第二个参数: 回调函数
-    // watch(count,(newVal,oldVal)=>{
-    // 	console.log(51,newVal)
-    // })
-    watch(name, (newVal, oldVal) => {
-      console.log(51, newVal);
-    });
-    //监听对象的某一项
-    watch(
-      () => msg.Account,
-      (val) => {
-        console.log(val);
-      }
-    );
-    // computed 计算属性 : 适合计算一个属性, 并且绑定.
-    // computed将监听它里面所有的变量, 里面变量发生变化就会触发结果重新计算
-
-    // 计算出来的结果是只读的, 所以fullName是不能被改变的
-    const fullName = computed(() => name.firstname + name.lastname);
-    // const fullName = computed(() => { return	name.firstname + name.lastname});
-    // 高级用法: 可以修改值
-    const fullName2 = computed({
-      get: () => name.firstname + name.lastname,
-      set: (val) => {},
-    });
-    onMounted(() => {
-      console.log("onmounted");
-    });
-    return {
-      data,
-      ...toRefs(name),
-      fullName,
-      fullName2,
-    };
-  },
-  onLoad() {
-    //这里有this
-    let { ctx } = getCurrentInstance();
-    ctx.$test("首页");
-    this.$test("首页");
-    console.log(69, this);
-    uni.setNavigationBarTitle({
-      title: "首页",
-    });
-  },
-};
-</script>