Browse Source

修改测试流程

plg 1 month ago
parent
commit
9b46b361fe
6 changed files with 616 additions and 74 deletions
  1. 10 4
      src/api/plan.ts
  2. 8 1
      src/router/index.ts
  3. 25 9
      src/utils/http.ts
  4. 146 59
      src/views/Plan.vue
  5. 2 1
      src/views/Scale.vue
  6. 425 0
      src/views/ScaleDetail.vue

+ 10 - 4
src/api/plan.ts

@@ -19,6 +19,9 @@ const pubMsgUrl = '/comment/addComment'
 
 //分页查询留言
 const queryMsgUrl = '/comment/findAllByPage'
+
+//查询量表详情
+const queryScaleDetailUrl = '/subject/findByFlag'
 //首页API
 export const homeApi = (val: any) => {
     return http<any>(
@@ -28,9 +31,6 @@ export const homeApi = (val: any) => {
             data: { val }
         })
 }
-
-
-
 //获取量表信息
 export const getScaleApi = (val: string) => {
     return http<any>(
@@ -39,7 +39,6 @@ export const getScaleApi = (val: string) => {
             url: `${getSacleUrl}?flag=${val}`
         })
 }
-
 //保存量表信息
 //获取量表信息
 export const saveScaleApi = (val: any) => {
@@ -124,4 +123,11 @@ export const queryMsgApi1 = (val: any) => {
             url: `${queryMsgUrl}?pageNum=${val.pageNum}&pageSize=${val.pageSize}&parentId=${val.parentId}`,
         })
 }
+//根据flag查询 量表详细信息
+export const queryScaleDetailApi = (val: string) => {
+    return http<any>({
+        method: 'get',
+        url: `${queryScaleDetailUrl}?flag=${val}`
+    })
+}
 

+ 8 - 1
src/router/index.ts

@@ -77,10 +77,17 @@ const routes = [
 
     },
     {
-      path: 'scale/:planId/:planName/:flag/:flagName/:num',
+      path: 'scale/:planId/:planName/:flag/:flagName',
       name: 'scale',
       component: () => import('@/views/Scale.vue')
 
+    },
+    //量表或认知任务详情页
+    {
+      path: 'scaleDetail/:planId/:planName/:flag/:type',
+      name: 'scaleDetail',
+      component: () => import('@/views/ScaleDetail.vue')
+
     },
     {
       path: 'scaleMid/:planId/:planName/:flag/:flagName/:num',

+ 25 - 9
src/utils/http.ts

@@ -35,6 +35,8 @@ axios.defaults.withCredentials = true;
 //设置 使用token的白名单
 const whiteList = []
 
+
+
 //设置请求前的拦截器
 axios.interceptors.request.use(
 
@@ -58,21 +60,35 @@ axios.interceptors.response.use(
     response => {
         //对响应中做些什么
         if (response.data.code === 401) {
+
             // 重定向到登录页
             //登录状态失效
-            ElMessage({
-                message: response.data.msg,
-                type: 'warning'
-            })
-
-            // const router = useRouter()
-            console.log(router)
-            router.push({ name: 'login' })
-            menuStatus.saveActiveIndex('6')
+
+            //取到缓存里的登录信息
+            //---将token 去掉
+            //出现401 浏览器中还存在缓存   就先提示过期了
+            //然后清除用户信息缓存--重新登录
+            if (userInfo.token) {
+                ElMessage({
+                    message: response.data.msg,
+                    type: 'warning'
+                })
+
+
+                // const router = useRouter()
+                console.log(router)
+                router.push({ name: 'login' })
+                menuStatus.saveActiveIndex('6')
+            }
+
+
+            //清除用户缓存
+            userInfo.clearUserInfo()
             // router.push({ name: 'login' })
             //此时报告找不到路径
             // Toast.fail(response.data.msg);
             // Message.error(response.data.msg);
+
         }
         return response
     }, error => {

+ 146 - 59
src/views/Plan.vue

@@ -13,16 +13,12 @@ import { ElMessage } from 'element-plus';
 const userInfo = userInfoStore();
 const menuStatus = menuStatusStore();
 menuStatus.saveActiveIndex('4')
-
-
 //标志  设置--方法是否结束的标志
 const isFinshed = ref<boolean>(false)
-
 //定义计划列表数据
 const planList = ref<any>([
 
 ])
-
 //时间格式化 1000  60  60
 // const formatterTi = (val: number) => {
 //     let mill = Math.floor(val / 1000)
@@ -34,6 +30,74 @@ const planList = ref<any>([
 // }
 //点击了开始测试--跳转到测试页面
 const startPlan = (val: any) => {
+    let nextFlag = '';
+    let type = '';
+    if (val.scaleList.length > 0) {
+        //循环判断是否都完成了
+        for (let i = 0; i < val.scaleList.length; i++) {
+            if (val.scaleList[i].isCompleted != '1') {
+                nextFlag = val.scaleList[i].flag;
+                type = val.scaleList[i].contentType;
+                break;
+            }
+        }
+    }
+    //当标志是空的时候证明所有量表的问答测试都已经完成了
+    //接下就需要判断认知任务的完成情况了
+    if (nextFlag == '') {
+        //那就需要判断是否是 认知任务是否做完了
+        for (let i = 0; i < val.taskList.length; i++) {
+            if (val.taskList[i].isCompleted !== '1') {
+                nextFlag = val.taskList[i].flag;
+                type = val.taskList[i].contentType;
+            }
+        }
+    } else {
+        //那就需要
+        //假如没做完的---判断是flag 是否是scl90
+        if (nextFlag == "20210617140713") {
+            //设置---
+            //判断scl 90 的完成状态是0还是2
+            for (let i = 0; i < val.scaleList.length; i++) {
+                if (val.scaleList[i].flag == '20210617140713') {
+                    if (val.scaleList[i].isCompleted == '0') {
+
+                    }
+                    if (val.scaleList[i].isCompleted == '2') {
+                        //如果是2的话
+                        //几个量表
+                        //拿到
+                        //需要--找到下一个需要做的不展示但是需要必测的
+                    }
+                }
+            }
+        }
+    }
+    //如果是量表就开始跳转到量表页面
+    //判断是type 0还是1
+    //如果是0的话,需要跳转到量表中间页面
+    if (type == '0') {
+        //跳转量表中间页
+        //传输
+        router.push({
+            name: 'scaleDetail', params: {
+                planId: val.id,
+                planName: val.planName,
+                flag: nextFlag,
+                type: type
+            }
+        })
+
+    } else {
+        //跳转到认知任务中间页
+    }
+    //如果是1的话,需要跳转到认知任务中间页面
+
+
+    //先判断量表接口中是否都完成了
+    //如果量表接口都完成了
+    //则开始循环认知任务接口
+    debugger;
     let a = true
     if (a) {
         ElMessage({
@@ -107,23 +171,7 @@ const startPlan = (val: any) => {
                 }
             })
         }
-
-        //开始跳转页面
-        //带上计划编号--计划名称
-        //以及flag  
     }
-    //取到当前计划的下变的字段
-    //然后循环查看是该做第几个了
-
-    //点击了开始跳转到量表测试页面
-    // if (val == 1) {
-    //     router.push({ name: 'scale' })
-    // } else if (val == 2) {
-    //     router.push({ name: 'cognize', params: { id: 2 } })
-    // } else {
-    //     router.push({ name: 'cognize', params: { id: 3 } })
-    // }
-
 }
 
 const planNumGet = async () => {
@@ -139,7 +187,6 @@ const planNumGet = async () => {
         //调用根据用户查询计划的API
         let res: any = await userPlanApi(userNo)
 
-
         userInfo.savePlanCurrentNum(res.data.length)
         planList.value = res.data
 
@@ -152,7 +199,61 @@ const planNumGet = async () => {
             let temp: any = await userPlanDetailApi(params)
             planList.value[i].list = temp.data
         }
+
+        //-------------处理SCL90的完成状态----------------
+        for (let i = 0; i < planList.value.length; i++) {
+            //
+
+            if (planList.value[i].list.length > 0) {
+                planList.value[i].scaleList = []
+                planList.value[i].taskList = []
+                //判断是否有----不显示必做但是必做未完成的
+                let flag = false
+                for (let j = 0; j < planList.value[i].list.length; j++) {
+                    //
+                    //不需要展示--但是必做--且含有未完成的
+                    if (planList.value[i].list[j].isDisplayed == '0'
+                        && planList.value[i].list[j].isAvailable == '1'
+                        && planList.value[i].list[j].isCompleted == '0') {
+                        flag = true
+                    }
+
+                    //判断是否是SCL90的flag
+                    //如果是SCL的Flag则判断其完成状态
+                    //如果完成状态是0则正常开始
+                    //如果完成状态为1,则判断后边的到底有没有必做不显示但是其中有未完成的
+                    //如果完成状态为1,则判断后边的到底有没有必做不显示但是其中有未完成的
+                }
+                for (let j = 0; j < planList.value[i].list.length; j++) {
+                    //不需要展示--但是必做--且含有未完成的
+                    if (flag) {
+                        if (planList.value[i].list[j].flag == "20210617140713" && planList.value[i].list[j].isCompleted == "1") {
+                            //如果满足以上条件则scl90的状态切换为2  --也是未完成--但是预示着后边还有需要做的
+                            planList.value[i].list[j].isCompleted = '2'
+                        }
+                    }
+
+                    if (planList.value[i].list[j].contentType == '0' && planList.value[i].list[j].isAvailable == '1') {
+                        console.log(planList.value[i].list[j])
+                        planList.value[i].scaleList.push(planList.value[i].list[j])
+                    }
+                    if (planList.value[i].list[j].contentType == '1' && planList.value[i].list[j].isAvailable == '1') {
+                        console.log(planList.value[i].list[j])
+                        planList.value[i].taskList.push(planList.value[i].list[j])
+                    }
+                    //判断是否是SCL90的flag
+                    //如果是SCL的Flag则判断其完成状态
+                    //如果完成状态是0则正常开始
+                    //如果完成状态为1,则判断后边的到底有没有必做不显示但是其中有未完成的
+                    //如果完成状态为1,则判断后边的到底有没有必做不显示但是其中有未完成的
+                }
+            }
+        }
+        console.log("planList.value")
         console.log(planList.value)
+        //数据格式改变抽出需要展示的量表、、放入数组
+        //抽出需要展示的认知任务--放入数组
+
     }
     isFinshed.value = true
 }
@@ -186,23 +287,17 @@ onUnmounted(() => {
         <div class="kply">
             <div class="kply_inner">
                 <div>
-                    <!-- <div style="padding: 20px 40px;" v-show="planList.length == 0 && isFinshed">
-                        <div style="padding:10% 20% ;" v-show="planList.length == 0 && isFinshed">
-                            <img width="60%" style="margin-left: 20%;" src="../assets/planNo.png">
-                        </div>
-                    </div> -->
                     <div>
-
-
                     </div>
-                    <div class="test_record_out" v-for="item in 4">
+                    <div class="test_record_out" v-for="item in planList">
                         <div class="record_tip">
-                            <span class="record_tip_out"><span class="record_tip_inner">创建时间:</span>2024/07/26</span>
-                            <span><span class="record_tip_inner">结束时间:</span>2024/07/26</span>
+                            <span class="record_tip_out"><span class="record_tip_inner">创建时间:</span>{{ item.createTime
+                                }}</span>
+                            <span><span class="record_tip_inner">结束时间:</span>{{ item.planEndTime }}</span>
                         </div>
                         <div class="test_record">
                             <img src="../assets/kepu/task_1.png" />
-                            <span>2024年度春季学期计算机与人工智能学院、软件学院测评</span>
+                            <span>{{ item.planName }}</span>
                         </div>
                         <div class="test_time">
                             <span>请根据您最近一个月的实际情况,选择最符合自己的选项。所有陈述都无正确和错误之分。所以请您不要再三思考,要根据第一反应诚实作答。</span>
@@ -210,47 +305,38 @@ onUnmounted(() => {
                         </div>
                         <div class="content_out">
                             <div class="content_inner">
-                                <div>
+                                <div class="task_out">
                                     <div class="content_title">1.问答测试</div>
-                                    <div class="content_one">
-                                        <div class="content_single">
-                                            <img style="width: 80px;height: 80px;" src="../assets/kepu/xlwht_active.png"
-                                                alt="">
-                                            <div class="content_detail">
-                                                <div class="title">SCL90</div>
-                                                <div class="des">描述</div>
+                                    <div class="task_inner">
+
+                                        <div class="task_inner_single" v-for="subItem in item.scaleList"
+                                            :key="subItem.id">
+                                            <div class="task_inner_one">
+                                                <img style="width: 80px;height: 80px"
+                                                    src="../assets/kepu/xlwht_active.png" alt="">
+                                                <div class="task_content">
+                                                    <div class="title">{{ subItem.name }}</div>
+                                                    <div class="des">预计用时{{ subItem.expectTime }}</div>
+                                                </div>
                                             </div>
                                         </div>
+
                                     </div>
                                 </div>
 
-
                                 <div class="task_out">
                                     <div class="content_title">2.认知评估</div>
                                     <div class="task_inner">
-                                        <div class="task_inner_single">
+                                        <div class="task_inner_single" v-for="subItem in item.taskList">
                                             <div class="task_inner_one">
                                                 <img style="width: 80px;height: 80px"
                                                     src="../assets/kepu/xlwht_active.png" alt="">
                                                 <div class="task_content">
-                                                    <div class="title">冲动掌控大师</div>
-                                                    <div class="des">描述</div>
+                                                    <div class="title">{{ subItem.name }}</div>
+                                                    <div class="des">预计用时{{ subItem.expectTime }}</div>
                                                 </div>
                                             </div>
-
                                         </div>
-                                        <div class="task_inner_single">
-                                            <div class="task_inner_one">
-                                                <img style="width: 80px;height: 80px;"
-                                                    src="../assets/kepu/xlwht_active.png" alt="">
-                                                <div class="task_content">
-                                                    <div class="title">情绪波动探测器</div>
-                                                    <div class="des">描述</div>
-                                                </div>
-                                            </div>
-
-                                        </div>
-
                                     </div>
                                 </div>
                             </div>
@@ -651,7 +737,7 @@ onUnmounted(() => {
                         padding: 20px 40px;
 
                         .content_title {
-                            margin-bottom: 10px;
+                            margin-bottom: 0px;
                             font-weight: 700;
                             font-size: 18px;
                         }
@@ -706,9 +792,10 @@ onUnmounted(() => {
                                 flex-direction: row;
 
                                 justify-content: space-between;
+                                flex-wrap: wrap;
 
                                 .task_inner_single {
-
+                                    margin-top: 20px;
                                     height: 100px;
                                     border-radius: 20px;
                                     width: 45%;

+ 2 - 1
src/views/Scale.vue

@@ -113,6 +113,7 @@ const subScaleData = async () => {
     }
     const res = await saveScaleApi(params)
 
+    //提交后需要调用----看看是否还需要做附加题
     ElMessage({
         message: '提交完成',
         type: "success",
@@ -127,7 +128,7 @@ const subScaleData = async () => {
                 planName: planName.value,
                 flag: flag.value,
                 flagName: flagName.value,
-                num: num.value
+                // num: num.value
             }
         })
     }, 1500)

+ 425 - 0
src/views/ScaleDetail.vue

@@ -0,0 +1,425 @@
+<script lang="ts" setup>
+import CpmdHeader from '@/components/CpmdHeader.vue';
+import { queryScaleDetailApi } from '@/api/plan'
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+const route = useRoute()
+const router = useRouter()
+//测试flag
+const flag = ref<string>('')
+//测试计划ID
+const planId = ref<string>('')
+//测试计划名称
+const planName = ref<string>('')
+//测试任务的类型 
+const type = ref<string>('')
+
+//量表描述
+const detail = ref<string>('')
+//量表理论
+const theory = ref<string>('')
+//量表参考文献
+const reference = ref<string>('')
+//量表名称
+const scaleName = ref<string>('')
+onMounted(() => {
+    //修改 flag    
+    flag.value = route.params.flag as string;
+    planId.value = route.params.planId as string;
+    planName.value = route.params.planName as string;
+    type.value = route.params.type as string;
+
+    //获取传输过来的测评介绍
+    //获取传输过来的类型
+    //获取传输过来的flag
+
+    //拿到以后根据根据flag查询
+    if (type.value == '0') {
+        queryScaleDetail()
+    }
+})
+const queryScaleDetail = async () => {
+    //根据flag查询量表详情
+    let res: any = await queryScaleDetailApi(flag.value)
+    console.log(res)
+    scaleName.value = res.data.name;
+    detail.value = res.data.description;
+    theory.value = res.data.theory;
+    //参考文献
+    console.log(res.data.reference)
+    reference.value = res.data.reference.split('//');
+    console.log(reference.value)
+    debugger
+}
+const startText = () => {
+    //当;类型是0时、、跳转到量表测试界面
+    if (type.value == '0') {
+        //开始跳转到scal90测试界面
+        router.push({
+            name: 'scale',
+
+            params: {
+                planId: planId.value,
+                planName: planName.value,
+                flag: flag.value,
+                flagName: scaleName.value
+            }
+        })
+
+    }
+}
+//接受来自计划页面的参数
+//得到需要测试的类型
+//得到需要测试的flag
+//查询量表的描述
+//查询量表的文献
+</script>
+<template>
+
+    <div class="home_header_out" ref="homeHeaderOut">
+        <div class=" home_header_inner">
+            <CpmdHeader />
+            <div style="text-align: center;">
+                <img class="xlts_img" style="margin-top:20px" src="../assets/home/other_text.png" />
+            </div>
+        </div>
+        <div class="kply">
+            <div class="kply_inner">
+                <div style="padding :20px 40px">
+                    <div class="cognize_title">
+                        {{ scaleName }}
+                    </div>
+                    <div class="cognize_img_out">
+                        <img src="../assets/cognize/c1.png" v-show="true" width=" 100px" height="100px"
+                            style="margin-right: 20px;" />
+                        <div class="cognize_des">
+                            <span class="cpjs">测评介绍:</span>{{ detail }}
+                        </div>
+
+                    </div>
+                    <div class="yl_out"><span class="yl">原理:</span><span class="yl_detail">{{ theory }}</span>
+                    </div>
+                    <div class="ckwx">
+                        <div class="reference_title">参考文献:</div>
+                        <div v-for="item, index in reference" :key="index" class='reference_cal'>
+                            <div>[{{ index + 1 }}]</div>
+                            <div>{{ item }}</div>
+                        </div>
+                    </div>
+                    <div class=" scale_button">
+                        <el-row>
+                            <el-col :span="12" class="scale_button_inner">
+
+                                <div class="scale_button_self" @click="startText">开始测试</div>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="scss">
+.cognize_real_out {
+    background-color: #b64d4d;
+    color: #41348a;
+    position: fixed;
+    z-index: 100;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+}
+
+.home_header_out {
+    padding-bottom: 60px;
+    width: 100%;
+    min-width: 1200px;
+    background-image: url('../assets/home/bg_ty.png');
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-color: #FAFAFA; //估计是需要动态
+
+    .home_header_inner {
+        min-height: 1;
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: 1200px;
+
+        .xlts_img {
+            height: 40px;
+        }
+    }
+
+    .kply {
+        width: 100%;
+        margin-top: 20px;
+
+        .kply_inner {
+            min-height: 500px;
+            left: 0;
+            right: 0;
+            margin: auto;
+            width: 860px;
+            // padding: 20px 20px;
+            background-color: #ffffff;
+            border-radius: 40px;
+
+            .yl_out {
+                margin-top: 10px;
+                letter-spacing: 3px;
+
+                .yl {
+                    color: #48D68E;
+                    font-weight: 700;
+                }
+
+                .yl_detail {
+                    letter-spacing: 2px;
+                    line-height: 25px;
+                }
+            }
+
+            .ckwx {
+                margin-top: 10px;
+
+                .reference_title {
+                    color: #a9a9a9;
+                    font-size: 16px;
+                }
+
+                .reference_cal {
+                    display: flex;
+                    width: 100%;
+                    color: #a9a9a9;
+                    font-size: 14px;
+                    letter-spacing: 2px;
+                    line-height: 30px;
+                }
+            }
+
+
+            .cognize_title {
+
+                font-size: 20px;
+                letter-spacing: 3px;
+                font-weight: 700;
+                margin-bottom: 10px;
+            }
+
+            .cognize_title2 {
+                font-size: 20px;
+                letter-spacing: 3px;
+                // font-weight: 700;
+                margin-top: 10px;
+                margin-bottom: 20px;
+            }
+
+            .cognize_img_out {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                .cognize_des {
+                    letter-spacing: 2px;
+                    line-height: 20px;
+                    font-size: 16px;
+                    line-height: 25px;
+
+                    .cpjs {
+                        color: #48D68E;
+                        font-weight: 700;
+                    }
+                }
+            }
+
+            .cognize_video {
+                display: flex;
+                justify-content: center;
+            }
+
+            .pdf_op {
+                margin-top: 20px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .pdf_sc {
+                    display: flex;
+                    // justify-content: space-between;
+                    align-items: center;
+                    cursor: pointer;
+
+                    .view {
+                        margin-left: 10px;
+                        color: #3E43FF;
+                    }
+                }
+            }
+
+            .scale_button {
+                margin-top: 30px;
+                margin-bottom: 20px;
+
+                .scale_button_inner {
+                    text-align: center;
+                    display: flex;
+                    justify-content: center;
+
+                    .scale_button_self {
+
+                        border-radius: 12px;
+                        border: 3px solid #48D68E;
+                        color: #ffffff;
+                        background-color: #000000;
+                        margin-right: 20px;
+                        padding: 10px 40px;
+                        cursor: pointer;
+                        display: flex;
+                        align-items: center;
+                        font-size: 16px;
+                    }
+                }
+            }
+        }
+    }
+
+
+}
+
+
+
+.home_mid {
+    // background-color: blanchedalmond;
+    width: 1200px;
+    left: 0;
+    right: 0;
+    margin: auto;
+    margin-top: 40px;
+    // position: relative;
+
+
+
+
+    .kepu_title {
+        text-align: center;
+
+        font-size: 50px;
+        color: #111111;
+        line-height: 95px;
+
+        // width: 100%;
+        // left: 0;
+        // right: 0;
+        // margin: auto
+    }
+
+    .kepu_title_sub {
+        margin-top: 30px;
+        text-align: center;
+        font-size: 28px;
+        color: #48D68E;
+        line-height: 26px;
+    }
+
+    .man1_group {
+        margin-top: 60px;
+        height: 100%;
+        display: flex;
+
+        .man1 {
+            position: relative;
+            width: 327px;
+            // height: 100%;
+
+            // height: 100%
+            .man1_img {
+                position: absolute;
+                bottom: 0;
+                /* bottom: 0px; */
+                /* height: auto; */
+                width: 100%;
+                left: 100px
+            }
+
+        }
+
+        .des {
+            border: #48D68E solid 5px;
+            border-radius: 40px;
+            padding: 20px;
+            letter-spacing: 6px;
+            flex: 1;
+
+            .des_inner {
+                border: 1px dashed #48D68E;
+                border-radius: 40px;
+                padding-bottom: 40px;
+                padding-top: 30px;
+                padding-left: 100px;
+                padding-right: 20px;
+                letter-spacing: 6px;
+                font-weight: normal;
+                font-size: 24px;
+                color: #333333;
+                line-height: 40px;
+            }
+        }
+    }
+
+    .man2_group {
+        margin-top: 60px;
+        height: 100%;
+        display: flex;
+
+        .man2 {
+            position: relative;
+            width: 327px;
+            // height: 100%;
+
+            // height: 100%
+            .man2_img {
+                position: absolute;
+                bottom: 0;
+                /* bottom: 0px; */
+                /* height: auto; */
+                width: 100%;
+                left: -100px
+            }
+
+        }
+
+        .des2 {
+            border: #48D68E solid 5px;
+            border-radius: 40px;
+            padding: 20px;
+            letter-spacing: 6px;
+            flex: 1;
+
+            .des2_inner {
+                border: 1px dashed #48D68E;
+                border-radius: 40px;
+                padding-bottom: 40px;
+                padding-top: 30px;
+                padding-left: 20px;
+                padding-right: 100px;
+                letter-spacing: 6px;
+                font-weight: normal;
+                font-size: 24px;
+                color: #333333;
+                line-height: 40px;
+            }
+        }
+    }
+
+    .get_more {
+        text-align: center;
+
+        img {
+            width: 300px;
+            margin-top: 60px;
+            margin-bottom: 60px;
+        }
+    }
+}
+</style>