feat:案例和测评接口（测试）新增内部考试选则考卷抽屉

src/api/indexCase.js

@@ -0,0 +1,4 @@
+import http from "./config";
+
+//获取案例信息
+export const queryCasesDetailList = (obj) => http.post(" /cases/queryCasesDetailList", obj);

src/api/indexEval.js

@@ -66,6 +66,10 @@ export const queryEvaluationDetailById = (obj) =>
 export const updateEvaluation = (obj) =>
   http.post("/evaluation/updateEvaluation", obj);
 
+//测评列表查询接口
+  export const choiceEvaluation = (obj) =>
+  http.post("  /evaluation/choiceEvaluation", obj);
+
 // 测试方法
 // import * as api from '../../api/index'
 // api.getLearnPath({}).then(res => {

src/components/drawers/AddCase.vue

@@ -82,11 +82,11 @@
 </template>
 <script>
 import { reactive, toRefs, onMounted } from "vue";
-import * as api from "../../api/indexInvist.js";
+import * as api from "../../api/indexCase.js";
 import * as apiTask from "../../api/indexTaskadd";
 import { message } from "ant-design-vue";
 import { RouterEditTask } from "@/api/indexTask";
-import dayjs from "dayjs";
+// import dayjs from "dayjs";
 
 export default {
   name: "AddCase",
@@ -137,15 +137,7 @@ export default {
   },
   setup(props, ctx) {
     const state = reactive({
-      tableData: [
+      tableData: [],
-        {
-          key: "1",
-          title:
-            "基于BOE显示PNL工厂的工序平1111112222222221111111111111122222333335555",
-          name: "李玉冰",
-          time: "2022-10-31  23:12:00",
-        },
-      ],
       currentPage: 1,
       tableDataTotal: 0,
       pageSize: 10,
@@ -166,17 +158,16 @@ export default {
       const columns = [
         {
           title: "案例标题",
-          dataIndex: "tit",
+          dataIndex: "title",
-          key: "tit",
+          key: "title",
           width: "400px",
           align: "center",
         },
         {
-          title: "作者",
+          title: "作者名称",
-          dataIndex: "name",
+          dataIndex: "authorName",
-          // width: "30%",
+          key: "authorName",
-          key: "name",
+          width: "200px",
-          width: "100px",
           align: "center",
           className: "classify",
         },
@@ -184,8 +175,9 @@ export default {
           title: "导入时间",
           dataIndex: "time",
           key: "time",
-          width: "200px",
+          width: "400px",
           align: "center",
+          className: "classify",
         },
       ];
       return columns;
@@ -207,11 +199,12 @@ export default {
       data.map((value, index) => {
         let obj = {
           key: index,
-          assessmentId: value.assessmentId,
+          authorId:value.authorId,
-          num: value.essayQuestionVoList.length,
+          authorName:value.authorName,
-          name: value.assessmentName ? value.assessmentName : "-",
+          companyId:value.companyId,
-          creator: value.createUser ? value.createUser : "-",
+          coverUrl:value.coverUrl,
-          time: dayjs(value.createTime).format("YYYY-MM-DD"),
+          caseid:value.caseid,
+          title:value.title,
         };
         array.push(obj);
       });
@@ -220,19 +213,22 @@ export default {
     //获取全部案例信息接口
     const getAllCaseText = () => {
       api
-        .queryAssessmentDetailList({
+        .queryCasesDetailList({
-          assessmentName: "",
+          "keyWord": "",
-          pageNo: state.currentPage,
+          "orderAsc": true,
-          pageSize: state.pageSize,
+          "orderField": "",
+          "pageIndex": 0,
+          "pageSize": 0,
+          "top": true
         })
         .then((res) => {
-          let arr = res.data.data.rows;
+          let arr = res.data.data;
           if (res.status === 200) {
             getTableDate(arr);
-            state.tableDataTotal = Number(res.data.data.total);
           }
         })
         .catch(() => {
+          console.log('---------------------获取全部案例信息接口失败-----------------------');
         });
     };
     const updateTask = () => {

src/components/drawers/AddEval.vue

@@ -58,6 +58,7 @@
                   v-model:EvalListVisible="EvalListVisible"
                   v-model:evaluationTypeId="evaluationTypeId"
                   v-model:evaluationTypeName="evaluationTypeName"
+                  @getEvLsitDate="checkFinish"
                 />
               </div>
             </div>
@@ -166,13 +167,17 @@ export default {
       inputV2: "",
       time: undefined,
       EvalId: null,
+      //子传回来的参数
       evaluationTypeId: null,
       evaluationTypeName: "",
       description: "",
       EvalListVisible: false,
       // addLoading:false,
     });
-
+    const checkFinish = (EvListDate)=> {
+      state.evaluationTypeId = EvListDate.Id
+      state.evaluationTypeName = EvListDate.Name
+    }
     const closeDrawer = () => {
       ctx.emit("update:addevalVisible", false);
       ctx.emit("update:edit", false);
@@ -293,6 +298,7 @@ export default {
     return {
       ...toRefs(state),
       afterVisibleChange,
+      checkFinish,
       closeDrawer,
       //增改
       createEvalText,

src/components/drawers/AddTest.vue

@@ -92,6 +92,7 @@
                       style="width: 100px; margin-left: 35px"
                       class="outer"
                       @click.prevent
+                      @click="selectTest()"
                     >
                       选择试卷
                       <DownOutlined />
@@ -304,6 +305,8 @@
     <div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
       <a-spin :spinning="addLoading" tip="添加中..." />
     </div>
+    <!-- 选择考试抽屉 -->
+    <s-test v-model:STvisible="STvisible"/>
   </a-drawer>
 </template>
 <script>
@@ -314,14 +317,16 @@ import {
   queryExaminationDetailById,
   updateExamination,
 } from "@/api/indexExam";
+import STest from "./SelectTest.vue"
 import { ProjectEditTask, RouterEditTask } from "@/api/indexTask";
 
 import dayjs from "dayjs";
 
 export default {
   name: "AddTest",
-  // components: {
+  components: {
-  // },
+    STest,
+  },
   props: {
     addtestVisible: {
       type: Boolean,
@@ -399,6 +404,7 @@ export default {
     const state = reactive({
       addLoading: false,
       isOuter: 1, // 是否为外部考试
+      STvisible:false, //选择试卷抽屉
       choosedTestList: [
         {
           value: "提高核心竞争力",
@@ -577,6 +583,11 @@ export default {
         queryTest();
       }
     };
+
+    const selectTest = ()=> {
+      state.STvisible = true
+    }
+
     const queryTest = () => {
       state.addLoading = true;
       queryExaminationDetailById({ examinationId: props.EditTestId })
@@ -741,6 +752,7 @@ export default {
       formState,
       afterVisibleChange,
       closeDrawer,
+      selectTest,
       cloradio1,
       cloradio2,
       cloradio3,

src/components/drawers/EvList.vue

@@ -46,7 +46,7 @@
           <div class="main_table">
             <a-table
             style="border: 1px solid #f2f6fe"
-            :columns="tablecolumns"
+            :columns="columns"
             :data-source="tabledata"
             :loading="tableDataTotal === -1 ? true : false"
             expandRowByClick="true"
@@ -81,7 +81,7 @@
     </a-drawer>
 </template>
 <script>
-  import { reactive, toRefs, ref } from "vue";
+  import { reactive, toRefs, ref,onMounted } from "vue";
   import * as api from "../../api/indexEval";
    export default {
     name: "EvList",
@@ -101,115 +101,27 @@
     },
     setup(props, ctx) {
       const state = reactive({
-        tableData1: [
-          {
-            key: "1",
-            num: "JDF2022071100001",
-            name: "时间管理课程",
-            content: "通用力",
-            teacher: "BOE教师",
-            creator: "管理员",
-            time: "2022-10-31 23:12:00",
-          },
-          {
-            key: "2",
-            num: "JDF2022071100001",
-            name: "管理能力课程",
-            content: "领导力",
-            teacher: "BOE教师",
-            creator: "管理员",
-            time: "2022-10-31 23:12:00",
-          },
-          {
-            key: "3",
-            num: "JDF2022071100001",
-            name: "快速换模SMED",
-            content: "通用力",
-            teacher: "BOE教师",
-            creator: "管理员",
-            time: "2022-10-31 23:12:00",
-          },
-          {
-            key: "4",
-            num: "JDF2022071100001",
-            name: "巧妙对话人见人夸",
-            content: "领导力",
-            teacher: "BOE教师",
-            creator: "管理员",
-            time: "2022-10-31 23:12:00",
-          },
-          {
-            key: "5",
-            num: "JDF2022071100001",
-            name: "管理能力课程",
-            content: "领导力",
-            teacher: "BOE教师",
-            creator: "管理员",
-            time: "2022-10-31 23:12:00",
-          },
-          {
-            key: "6",
-            num: "JDF2022071100001",
-            name: "时间管理课程",
-            content: "领导力",
-            teacher: "BOE教师",
-            creator: "管理员",
-            time: "2022-10-31 23:12:00",
-          },
-          {
-            key: "7",
-            num: "JDF2022071100001",
-            name: "时间管理课程",
-            content: "领导力",
-            teacher: "BOE教师",
-            creator: "管理员",
-            time: "2022-10-31 23:12:00",
-          },
-          {
-            key: "8",
-            num: "JDF2022071100001",
-            name: "时间管理课程",
-            content: "领导力",
-            teacher: "BOE教师",
-            creator: "管理员",
-            time: "2022-10-31 23:12:00",
-          },
-          {
-            key: "9",
-            num: "JDF2022071100001",
-            name: "时间管理课程",
-            content: "领导力",
-            teacher: "BOE教师",
-            creator: "管理员",
-            time: "2022-10-31 23:12:00",
-          },
-        ],
         currentPage: 1,
-        tableDataTotal: 100,
+        tableDataTotal: 0,
         pageSize: 10,
         vlue1:"",
-        tabledata: [
+        evaluationTypeId:null,
-      ],
+        evaluationTypeName:"",
+        tableData: [],
       });
-      const options1 = ref([
+    const columns = [
-    {
-      value: "value1",
-      label: "请选择状态",
-    },
-  ]);
-    const columns1 = [
       {
         title: "课程编号",
         width: "20%",
-        dataIndex: "num",
+        dataIndex: "kid",
-        key: "num",
+        key: "kid",
         align: "center",
       },
       {
         title: "title",
         width: "20%",
-        dataIndex: "name",
+        dataIndex: "title",
-        key: "name",
+        key: "title",
         align: "center",
       },
       {
@@ -222,15 +134,15 @@
       {
         title: "状态",
         width: "13%",
-        dataIndex: "teacher",
+        dataIndex: "status",
-        key: "teacher",
+        key: "status",
         align: "center",
       },
       {
         title: "价格",
         width: "13%",
-        dataIndex: "creator",
+        dataIndex: "price",
-        key: "creator",
+        key: "price",
         align: "center",
       },
       {
@@ -242,60 +154,59 @@
       },
     ];
     const rowSelection = ref({
+      type: "radio",
       checkStrictly: false,
-      onChange: (selectedRowKeys, selectedRows) => {
+      onSelect: (selectedRows) => {
-        console.log(
+        state.evaluationTypeName = selectedRows.title
-          `selectedRowKeys: ${selectedRowKeys}`,
+        state.evaluationTypeId = selectedRows.kid
-          "selectedRows: ",
-          selectedRows
-        );
-      },
-      onSelect: (record, selected, selectedRows) => {
-        console.log(record, selected, selectedRows);
-      },
-      onSelectAll: (selected, selectedRows, changeRows) => {
-        console.log(selected, selectedRows, changeRows);
       },
     });
     const closeDrawer = () => {
       ctx.emit("update:EvalListVisible", false);
     };
-    const afterVisibleChange = (bool) => {
+    const afterVisibleChange = () => {
-      console.log("state", bool);
+      // getEvalList();
-      getEvalList();
     };
     const checkFinish =() =>{
-      ctx.emit("update:evaluationTypeId", state.evaluationTypeId);
+      let EvListDate = {
-      ctx.emit("update:evaluationTypeName", state.evaluationTypeName);
+        Id : state.evaluationTypeId,
+        Name : state.evaluationTypeName,
+      }
+      ctx.emit("getEvListDate", EvListDate);
       closeDrawer();
     }
     const changePagination = (page) => {
       state.currentPage = page;
-      getEvalList();
+      // getEvalList();
     };
     const getTableDataList = (tableData) => {
       let data = tableData;
       let array = [];
       data.map((value) => {
         let obj = {
-          key: value.studentId,
+          status:value.status,
-          projectId: value.projectId, //项目id
+          kid:value.quiz_kid,
-          groupId: value.groupId, //小组id
+          title:value.title,
-          group: value.groupName, //小组名
+          price:value.quiz_price,
-          studentId: value.studentId, //学生id
+          // key: value.studentId,
-          currentStageId: value.currentStageId, //当前关卡id
+          // projectId: value.projectId, //项目id
-          name: value.name, //用户名
+          // groupId: value.groupId, //小组id
-          bum: value.userInfoBo.deptName, //部门
+          // group: value.groupName, //小组名
-          gangw: value.userInfoBo.jobName, //岗位
+          // studentId: value.studentId, //学生id
-          completeStageCnt: value.completeStageCnt, //当前完成阶段数
+          // currentStageId: value.currentStageId, //当前关卡id
-          totalStageCnt: value.totalStageCnt, //总阶段数
+          // name: value.name, //用户名
-          progress: value.completeStageCnt + "/" + value.totalStageCnt,
+          // bum: value.userInfoBo.deptName, //部门
-
+          // gangw: value.userInfoBo.jobName, //岗位
+          // completeStageCnt: value.completeStageCnt, //当前完成阶段数
+          // totalStageCnt: value.totalStageCnt, //总阶段数
+          // progress: value.completeStageCnt + "/" + value.totalStageCnt,
         };
         array.push(obj);
       });
       state.tabledata = array;
     };
+
+    //个人认为此接口为查询外部测评接口
     const getEvalList =(o)=>{
       let obj = o || {
         evaluationTypeName:state.value1
@@ -312,12 +223,30 @@
         }
       });
     };
+
+    //获取测评列表
+    const getAllEvalText = ()=> {
+      let objael = {
+        "keyword": "",
+        "user_id": 0
+      }
+      api
+      .choiceEvaluation(objael)
+      .then((res) => {
+        state.tableData = res.data.data
+        getTableDataList()
+      })
+    }
+    onMounted(() => {
+      getAllEvalText ();
+    });
     return {
       ...toRefs(state),
       afterVisibleChange,
       closeDrawer,
-      options1,
+      getEvalList,
-      columns1,
+      getTableDataList,
+      columns,
       rowSelection,
       checkFinish,
       changePagination,

src/components/drawers/SelectTest.vue

@@ -0,0 +1,438 @@
+<template>
+    <a-drawer
+      :visible="STvisible"
+      class="drawerStyle TimeManage"
+      placement="right"
+      width="60%"
+      @after-visible-change="afterVisibleChange"
+    >
+      <div class="drawerMain">
+        <div class="header">
+          <div class="headerTitle">选择考试</div>
+          <img
+            style="width: 29px; height: 29px; cursor: pointer"
+            src="../../assets/images/basicinfo/close.png"
+            @click="closeDrawer"
+          />
+        </div>
+        <div class="main">
+          <div class="search">
+            <div class="sealeft">
+              <div class="namecon" style="margin-right: 30px">
+                <div class="name">试卷名称：</div>
+                <a-input
+                  v-model:value="name"
+                  style="width: 270px; height: 40px; border-radius: 8px"
+                  placeholder="请输入试卷名称或序号"
+                />
+              </div>
+              <div class="namecon" style="margin-right: 30px">
+                <div class="name">创建人：</div>
+                <a-input
+                  v-model:value="name"
+                  style="width: 240px; height: 40px; border-radius: 8px"
+                  placeholder="请输入创建人"
+                />
+              </div>
+            </div>
+            <div class="btns">
+              <div
+                class="btn btn1"
+                style="margin-right: 20px"
+                @click="searchTaskList"
+              >
+                <div class="img1"></div>
+                <div class="wz">搜索</div>
+              </div>
+              <div class="btn btn2" @click="resetTaskList">
+                <div class="img2"></div>
+                <div class="wz">重置</div>
+              </div>
+            </div>
+          </div>
+          <div class="btnss" style="margin-top: 20px">
+            <div class="btn btn1" @click="newTest()" style="margin-right: 20px">
+              <div class="wz">新建考试</div>
+            </div>
+          </div>
+          <div class="tab" style="margin-top: 20px; margin-bottom: 100px">
+            <a-table
+              style="border: 1px solid #f2f6fe"
+              :columns="tableDataFunc()"
+              :data-source="tabledata"
+              :loading="tableDataTotal === -1 ? true : false"
+              expandRowByClick="true"
+              :scroll="{ x: 900 }"
+              @expand="expandTable"
+              :pagination="false"
+            />
+            <div class="tableBox">
+              <div class="pa">
+                <a-pagination
+                  showSizeChanger="true"
+                  showQuickJumper="true"
+                  hideOnSinglePage="true"
+                  :pageSize="pageSize"
+                  :current="currentPage"
+                  :total="tableDataTotal"
+                  class="pagination"
+                  @change="onChange"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="btnn">
+          <button class="btn1">取消</button>
+          <button class="btn2">确定</button>
+        </div>
+      </div>
+    </a-drawer>
+  </template>
+  
+  <script>
+  import { toRefs, reactive, onMounted } from "vue";
+  import * as api from "../../api/index";
+  export default {
+    name: "STest",
+    props: {
+      STvisible: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  
+    setup(props, ctx) {
+      const state = reactive({
+        name: "",
+        pageNo: 1,
+        pageSize: 10,
+        currentPage: 1,
+        tableDataTotal: 0,
+        projectName: "",
+        tabledata: [],
+      });
+      const tableDataFunc = ()=> {
+        {
+            const columns =  [
+                {
+                  title: "工号",
+                  dataIndex: "workNum",
+                  key: "workNum",
+                  width: 50,
+                  align: "center",
+                  className: "h head",
+                },
+                {
+                  title: "姓名",
+                  dataIndex: "userName",
+                  key: "userName",
+                  width: 50,
+                  align: "center",
+                  className: "h head",
+                },
+                {
+                  title: "所在部门",
+                  dataIndex: "deptName",
+                  key: "userName",
+                  width: 60,
+                  align: "center",
+                  className: "h",
+                },
+                {
+                  title: "所在岗位",
+                  dataIndex: "jobName",
+                  key: "jobName",
+                  width: 60,
+                  align: "center",
+                  className: "h",
+                },
+                {
+                  title: "完成时间",
+                  dataIndex: "time",
+                  key: "time",
+                  width: 100,
+                  align: "center",
+                  className: "h",
+                },
+                {
+                  title: "任务状态",
+                  dataIndex: "status",
+                  key: "status",
+                  width: 60,
+                  align: "center",
+                  className: "h",
+                },
+            ]
+            return columns;
+        } 
+      };
+      const closeDrawer = () => {
+        ctx.emit("update:STvisible", false);
+      };
+      const onChange = (pageNumber) => {
+        console.log("Page: ", pageNumber);
+      };
+      const newTest = ()=> {
+        console.log('111');
+      }
+      //获取任务管理列表
+      const getManageList = () => {
+        let obj = {
+          name: "",
+          pageNo: state.pageNo,
+          pageSize: state.pageSize,
+          projectId: 27,
+          projectTaskId: 370,
+        //   projectTaskId: props.projectTaskId,
+          status: -1,
+        };
+        api
+          .taskStudentList(obj)
+          .then((res) => {
+            state.pageNo = res.data.data.pageNo;
+            state.pageSize = res.data.data.pageSize;
+            state.pageSize = res.data.data.pageSize;
+            for (let i = 0; i < res.data.data.rows.length; i++) {
+              state.tabledata.push(res.data.data.rows[i].userInfoBo);
+            }
+          })
+          .catch((err) => {
+            console.log("获取时间任务列表失败cc", err);
+          });
+      };
+  
+      //搜索任务列表
+      const searchTaskList = () => {
+        let objser = {
+          name: "",
+          pageNo: state.pageNo,
+          pageSize: state.pageSize,
+          projectId: 27,
+        //   projectTaskId: props.projectTaskId,
+          projectTaskId: 370,
+          status: -1,
+        };
+        if (state.name !== "" || state.projectName !== "") {
+          api
+            .taskStudentList(objser)
+            .then((res) => {
+              state.pageNo = res.data.data.pageNo;
+              state.pageSize = res.data.data.pageSize;
+              state.pageSize = res.data.data.pageSize;
+              let newArr = [];
+              for (let i = 0; i < res.data.data.rows.length; i++) {
+                if (res.data.data.rows[i].userInfoBo.userName == state.name)
+                  newArr.push(res.data.data.rows[i].userInfoBo);
+              }
+              state.tabledata = newArr;
+            })
+            .catch((err) => {
+              console.log("搜索任务列表失败", err);
+            });
+        }
+      };
+  
+      //重置任务列表
+      const resetTaskList = () => {
+        state.name = "";
+        state.projectName = "";
+        state.tabledata = [];
+        getManageList();
+      };
+      onMounted(() => {
+        setTimeout(() => {
+          getManageList();
+        }, 500);
+      });
+      return {
+        ...toRefs(state),
+        closeDrawer,
+        newTest,
+        tableDataFunc,
+        onMounted,
+        onChange,
+        getManageList,
+        searchTaskList,
+        resetTaskList,
+      };
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  .TimeManage {
+    // overflow-x: auto;
+    .drawerMain {
+      min-width: 550px;
+      margin: 0px 32px 0px 32px;
+      overflow-x: auto;
+      display: flex;
+      flex-direction: column;
+      .header {
+        height: 73px;
+        border-bottom: 1px solid #e8e8e8;
+        display: flex;
+        flex-shrink: 0;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+        .headerTitle {
+          font-size: 18px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 25px;
+        }
+      }
+      .main {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        padding-right: 10px;
+        .search {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          margin-top: 20px;
+          justify-content: space-between;
+  
+          .sealeft {
+            display: flex;
+            flex-wrap: wrap;
+            .namecon {
+              display: flex;
+              flex-wrap: nowrap;
+              margin-bottom: 10px;
+              .name {
+                margin-top: 8px;
+                white-space: nowrap;
+              }
+            }
+          }
+          .btns {
+            display: flex;
+            flex-wrap: nowrap;
+  
+            .btn {
+              cursor: pointer;
+              width: 100px;
+              height: 40px;
+              border-radius: 8px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              .img1 {
+                width: 15px;
+                height: 17px;
+                background-image: url(../../assets/images/courseManage/search0.png);
+                background-size: 100% 100%;
+                margin-right: 7px;
+              }
+              .img2 {
+                width: 16px;
+                height: 18px;
+                background-image: url(../../assets/images/courseManage/reset1.png);
+                background-size: 100% 100%;
+                margin-right: 7px;
+              }
+            }
+  
+            .btn1 {
+              background: #409eff;
+  
+              color: #ffffff;
+            }
+            .btn2 {
+              background: #ffffff;
+  
+              color: #388be1;
+              border: 1px solid #388be1;
+            }
+          }
+        }
+        .btnss {
+          display: flex;
+          flex-wrap: nowrap;
+  
+          .btn {
+            cursor: pointer;
+            width: 130px;
+            height: 40px;
+            border-radius: 8px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+  
+          .btn1 {
+            background: #409eff;
+            color: #ffffff;
+          }
+        }
+        .tab {
+          th.h {
+            background-color: #eff4fc !important;
+          }
+  
+          .ant-table-tbody
+            > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+            > td {
+            background: #f6f9fd;
+          }
+          .tableBox {
+            .pa {
+              // left: 0;
+              margin-top: 15px;
+              width: 100%;
+              // height: 20px;
+              // background-color: red;
+              display: flex;
+              justify-content: center;
+              // position: absolute;
+              // bottom: 20px;
+              .ant-pagination-prev,
+              .ant-pagination-next,
+              .ant-pagination-item,
+              .ant-pagination-options {
+                margin-bottom: 10px;
+              }
+            }
+          }
+        }
+      }
+  
+      .btnn {
+        height: 72px;
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+        .btn1 {
+          width: 100px;
+          height: 40px;
+          border: 1px solid #4ea6ff;
+          border-radius: 8px;
+          color: #4ea6ff;
+          background-color: #fff;
+          cursor: pointer;
+        }
+        .btn2 {
+          cursor: pointer;
+          width: 100px;
+          height: 40px;
+          background: #409eff;
+          border-radius: 8px;
+          border: 0;
+          margin-left: 15px;
+          color: #fff;
+        }
+      }
+    }
+  }
+  </style>
+