update

src/components/pages/EnglishVoice/component/order.vue

@@ -9,8 +9,11 @@
         <div class="o_child_title" :class="{ active: checkType == index }" @click.stop="setCheckType(index)">
           <span class="drag" v-if="editType == 2"></span>
           <span class="order" v-else>{{ index + 1 }}、</span>
-          <span class="icon"
+          <el-tooltip :content="getType(item)" placement="top" effect="dark">
+            <!-- content to trigger tooltip here -->
+            <span class="icon"
             :class="{ icon_word: item.type == 'word', icon_sentence: item.type == 'sentence', icon_QA: item.type == 'QA', icon_theme: item.type == 'theme', icon_createRole: item.type == 'createRole' }"></span>
+          </el-tooltip>
           <span class="title">{{ getTitle(item) }}</span>
           <div class="edit_btn">
             <button class="c_pub_button_add" @click.stop="openTest(item)" style="margin-right: 15px;"
@@ -91,6 +94,21 @@ export default {
     //     }
     //   };
     // },
+    getType(){
+      return function (item) {
+        if (item.type == 'word') {
+          return '单词/词组'
+        } else if (item.type == 'sentence') {
+          return '句子/短文'
+        } else if (item.type == 'QA') {
+          return '问题'
+        } else if (item.type == 'theme') {
+          return '主题陈述'
+        } else if (item.type == 'createRole') {
+          return '角色对话'
+        }
+      }
+    },
     getTitle() {
       return function (item) {
         if (item.type == 'word' && !item.content) {

src/components/pages/dataBoardNew/course/index.vue

@@ -474,7 +474,7 @@ import Bar2 from "./chartList/bar2.vue";
 import CourseNum from "./chartList/courseNum.vue";
 import ToolChart from "./chartList/toolChart.vue";
 import Subjuect from "./chartList/subjuect.vue";
-import loading from "../../comploadingonents/loading.vue";
+import loading from "../../components/loading.vue";
 export default {
   components: {
     TeaFre,
@@ -1775,6 +1775,7 @@ export default {
   padding: 20px;
   box-sizing: border-box;
   overflow: hidden;
+  position: relative;
 }
 
 .left {

src/components/pages/dataBoardNew/project/index.vue

@@ -279,7 +279,7 @@ import barFinish from "./chartList/bar/finish.vue";
 import barCCourse from "./chartList/bar/cCourse.vue";
 import barTeacherStudent from "./chartList/bar/teacherStudent.vue";
 import barTime from "./chartList/bar/time.vue";
-import loading from "../../comploadingonents/loading.vue";
+import loading from "../../components/loading.vue";
 export default {
   components: {
     TeaFre,
@@ -834,6 +834,7 @@ export default {
   padding: 20px;
   box-sizing: border-box;
   overflow: hidden;
+  position: relative;
 }
 
 .left {

src/components/pages/dataBoardNew/student/index.vue

@@ -1131,6 +1131,7 @@ export default {
   padding: 20px;
   box-sizing: border-box;
   overflow: hidden;
+  position: relative;
 }
 
 .left {

src/components/pages/dataBoardNew/teacher/index.vue

@@ -1308,6 +1308,7 @@ export default {
   padding: 20px;
   box-sizing: border-box;
   overflow: hidden;
+  position: relative;
 }
 
 .left {

src/components/pages/test/index.vue

@@ -78,12 +78,12 @@
             </div>
             <div class="search_nav">
                 <div class="right">
-                    <span :class="{active: stype == 1}">按问卷查看</span>
+                    <span :class="{ active: stype == 1 }">按问卷查看</span>
                     <!-- <span :class="{active: stype == 2}">按人员查看</span> -->
                 </div>
                 <div class="left">
-                    <span class="list" :class="{active: stype == 1}"></span>
-                    <!-- <span class="table" :class="{active: stype == 2}"></span> -->
+                    <span class="list" :class="{ active: stype2 == 1 }" @click="checkStype2(1)"></span>
+                    <span class="table" :class="{ active: stype2 == 2 }" @click="checkStype2(2)"></span>
                 </div>
             </div>
             <div style="width: calc(100% - 20px);margin: 0 auto;">
@@ -103,7 +103,7 @@
                                 <el-option value="4" label="所有人"></el-option>
                             </el-select>
                         </div>
-                        <div @click="clear" class="clear" v-if="CourseType.length">重置</div>
+                        <!-- <div @click="clear" class="clear" v-if="CourseType.length">重置</div> -->
                     </div>
 
                     <div class="student_right">
@@ -114,14 +114,14 @@
                             </div>
                             <!-- <el-button type="primary" @click="searchCourse">查询</el-button> -->
                             <el-button type="primary" class="bgColor" @click="openTestDataBoard()"
-                        v-if="oid == '4c686762-1d0a-11ed-8c78-005056b86db5'">评测看板</el-button>
-                    <el-button type="primary" class="bgColor" @click="goToCourse()">新建评测</el-button>
+                                v-if="oid == '4c686762-1d0a-11ed-8c78-005056b86db5'">评测看板</el-button>
+                            <el-button type="primary" class="bgColor" @click="goToCourse()">新建评测</el-button>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="pb_content_body" style="height: 100%;width: 100%;">
-                <div class="student_table" v-loading="isLoading">
+                <div class="student_table" v-loading="isLoading" v-if="stype2 == 1">
                     <div class="course_box">
                         <div class="test_box" v-for="(item, index) in course" :key="index">
                             <div class="test_top">
@@ -165,11 +165,16 @@
                                             (item.course_teacher &&
                                                 item.course_teacher.indexOf(userid) !== -1) || role == '1')"></span>
                                     </el-tooltip>
-                                    <el-tooltip class="check" content="查看" placement="top" effect="dark">
-                                        <span @click="checkToTest(item.courseId)"></span>
+                                    <el-tooltip content="查看" placement="top" effect="dark">
+                                        <span class="check" @click="checkToTest(item.courseId)"></span>
                                     </el-tooltip>
-                                    <el-tooltip class="delete" content="删除" placement="top" effect="dark">
-                                        <span @click="deleteCourse(item.courseId)" v-if="((item.userid == userid) ||
+                                    <el-tooltip content="提醒" placement="top" effect="dark">
+                                        <span class="share" @click="shareTest(item)" v-if="((item.userid == userid) ||
+                                            (item.course_teacher &&
+                                                item.course_teacher.indexOf(userid) !== -1) || role == '1')"></span>
+                                    </el-tooltip>
+                                    <el-tooltip content="删除" placement="top" effect="dark">
+                                        <span class="delete" @click="deleteCourse(item.courseId)" v-if="((item.userid == userid) ||
                                             (item.course_teacher &&
                                                 item.course_teacher.indexOf(userid) !== -1) || role == '1')"></span>
                                     </el-tooltip>
@@ -182,6 +187,49 @@
                         <div class="course_empty" v-if="course.length == 0">暂无数据</div>
                     </div>
                 </div>
+                <el-table ref="table" :data="course" border v-loading="isLoading"
+                    :header-cell-style="{ color: '#00000066', fontSize: '16px', fontWeight: 'unset' }"
+                    :row-class-name="tableRowClassName2" v-if="stype2 == 2" class="tableClass">
+                    <el-table-column label="序号" width="100px" align="center">
+                        <template slot-scope="scope">
+                            {{ scope.$index + 1 }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="title" label="问卷名称" min-width="150" align="center">
+                    </el-table-column>
+                    <el-table-column prop="uname" label="创建者" min-width="80" align="center">
+                    </el-table-column>
+                    <el-table-column v-if="typeArray.length" prop="typeN" label="问卷类型" min-width="80" align="center">
+                        <template slot-scope="scope">
+                            {{ scope.row.typeN ? scope.row.typeN : '未设置类型' }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="worksCount" label="已提交数量" min-width="80" align="center">
+                    </el-table-column>
+                    <el-table-column label="表单状态" min-width="80" align="center">
+                        <template slot-scope="scope">
+                            <div class="test_type2" style="width: fit-content;margin: 0 auto;"
+                                :class="{ no: scope.row.look == '1', is: scope.row.look == '2' }">
+                                <span>{{ scope.row.look == '1' ? '未发布' : '已发布' }}</span>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="350px">
+                        <template slot-scope="scope">
+                            <el-button @click="goToCourse2(scope.row.courseId)" type="text" size="small"
+                                v-if="((scope.row.userid == userid) ||
+                                    (scope.row.course_teacher &&
+                                    scope.row.course_teacher.indexOf(userid) !== -1) || role == '1')">编辑</el-button>
+                            <el-button @click="checkToTest(scope.row.courseId)" type="text" size="small">详情</el-button>
+                            <el-button @click="shareTest(scope.row)" type="text" size="small">提醒</el-button>
+                            <el-button @click="deleteCourse(scope.row.courseId)" type="text" size="small"
+                                style="color: #EE3E3E;"
+                                v-if="((scope.row.userid == userid) ||
+                                    (scope.row.course_teacher &&
+                                    scope.row.course_teacher.indexOf(userid) !== -1) || role == '1')">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
             </div>
             <div class="student_page">
                 <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"
@@ -246,6 +294,7 @@
                 <el-button @click="dialogVisibleCourse = false">关 闭</el-button>
             </span>
         </el-dialog>
+        <share-box :testJson="scid" :dialogVisibleShare.sync="dialogVisibleShare"></share-box>
     </div>
 </template>
   
@@ -257,9 +306,10 @@ import pie2 from "./data/pie2.vue";
 import pie1 from "./data/pie1.vue";
 import randar1 from "./data/randar1.vue";
 import randar2 from "./data/randar2.vue";
+import shareBox from './shareBox/index.vue'
 export default {
     name: 'test',
-    components: { EditorBar, CourseProblem, pie1, pie2, randar1, randar2 },
+    components: { EditorBar, CourseProblem, pie1, pie2, randar1, randar2,shareBox },
     data() {
         return {
             itemCount: 1,
@@ -307,10 +357,19 @@ export default {
             typeArray: [],
             typeCheck: "",
             stype: 1,
-            stype2: 2,
+            stype2: 1,
+            scid:{},
+            dialogVisibleShare:false,
         };
     },
     methods: {
+        tableRowClassName2({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "rowClass";
+            } else {
+                return "rowClass";
+            }
+        },
         change(val) {
             console.log(val);
         },
@@ -590,6 +649,10 @@ export default {
         //       console.error(err);
         //     });
         // },
+        shareTest(cid){
+            this.scid = cid
+            this.dialogVisibleShare = true
+        },
         deleteCourse(cid) {
             // if (this.time()) {
             this.$confirm("确定删除此评测吗?", "提示", {
@@ -787,6 +850,11 @@ export default {
                     console.error(err);
                 });
         },
+        checkStype2(type) {
+            if (this.stype2 != type) {
+                this.stype2 = type
+            }
+        },
         search() {
             this.page = 1;
             this.getCourse();
@@ -1255,7 +1323,7 @@ export default {
     /* margin-top: 15px; */
 }
 
-.choose>div +div{
+.choose>div+div {
     margin-left: 10px;
 }
 
@@ -1523,27 +1591,47 @@ export default {
     margin-right: 20px;
 }
 
+.test_box>.test_btn>.test_o_btn>.share {
+    background-image: url('../../../assets/icon/test/share_test_icon.png');
+    margin-right: 20px;
+}
 .test_box>.test_btn>.test_o_btn>.delete {
     background-image: url('../../../assets/icon/test/delete_test_icon.png');
 }
 
-.test_box>.test_btn>.test_type {
+.test_type {
     font-size: 12px;
     border-radius: 5px;
     border: 1.5px solid;
     padding: 3px 8px;
 }
 
-.test_box>.test_btn>.is {
+.is {
     color: rgb(57, 204, 127);
     background-color: rgba(57, 204, 127, .1);
 }
 
-.test_box>.test_btn>.no {
+.no {
     color: rgb(235, 154, 96);
     background-color: rgba(235, 154, 96, .1);
 }
 
+.test_type2 {
+    font-size: 14px;
+    border-radius: 5px;
+    /* border: 1.5px solid; */
+    padding: 3px 8px;
+}
+
+.is {
+    color: rgb(57, 204, 127);
+    background-color: rgba(57, 204, 127, .1);
+}
+
+.no {
+    color: rgb(235, 154, 96);
+    background-color: rgba(235, 154, 96, .1);
+}
 .sub_head {
     position: relative;
     font-size: 20px;
@@ -1581,13 +1669,15 @@ export default {
 .subClick+.sub_head {
     margin-left: 17.5px;
 }
-.bbox_nav{
+
+.bbox_nav {
     width: 100%;
     display: flex;
     align-items: center;
     margin-top: 10px;
 }
-.bbox_nav > span{
+
+.bbox_nav>span {
     height: 40px;
     line-height: 40px;
     text-align: center;
@@ -1595,20 +1685,22 @@ export default {
     font-size: 18px;
     color: #41506D;
     padding: 0 35px;
-    border-radius: 5px 5px 0 0 ;
+    border-radius: 5px 5px 0 0;
 }
-.bbox_nav > .active{
+
+.bbox_nav>.active {
     background: #3681fc;
     color: #fff;
 }
-.bbox{
+
+.bbox {
     background: #fff;
     border-radius: 0 5px 5px 5px;
     padding: 15px 0;
     box-sizing: border-box;
 }
 
-.search_nav{
+.search_nav {
     border-bottom: 1px solid #E7E7E7;
     width: 100%;
     box-sizing: border-box;
@@ -1616,25 +1708,30 @@ export default {
     display: flex;
     align-items: center;
 }
-.search_nav > .right{
+
+.search_nav>.right {
     display: flex;
     align-items: center;
 }
-.search_nav > .right > span{
+
+.search_nav>.right>span {
     height: 30px;
     font-size: 14px;
     color: #000;
     cursor: pointer;
     position: relative;
 }
-.search_nav > .right > span + span{
+
+.search_nav>.right>span+span {
     margin-left: 35px;
 }
-.search_nav > .right > span.active{
+
+.search_nav>.right>span.active {
     color: #3681FC;
     font-weight: 600;
 }
-.search_nav > .right > span.active::before{
+
+.search_nav>.right>span.active::before {
     content: "";
     position: absolute;
     bottom: 0;
@@ -1644,13 +1741,14 @@ export default {
     left: 50%;
     transform: translateX(-50%);
 }
-.search_nav > .left{
+
+.search_nav>.left {
     display: flex;
     align-items: center;
     margin-left: auto;
 }
 
-.search_nav > .left > span{
+.search_nav>.left>span {
     height: 25px;
     width: 25px;
     display: flex;
@@ -1659,32 +1757,39 @@ export default {
     border-radius: 5px;
     cursor: pointer;
 }
-.search_nav > .left > span + span{
+
+.search_nav>.left>span+span {
     margin-left: 10px;
 }
-.search_nav > .left > span.active{
+
+.search_nav>.left>span.active {
     background: #E0EAFB;
 }
-.search_nav > .left > span::before{
+
+.search_nav>.left>span::before {
     content: "";
     width: 12px;
     height: 12px;
     background-size: 100% 100%;
 }
-.search_nav > .left > span.list::before{
+
+.search_nav>.left>span.list::before {
     background-image: url("../../../assets/icon/test/test_list.png");
 }
-.search_nav > .left > span.table::before{
+
+.search_nav>.left>span.table::before {
     background-image: url("../../../assets/icon/test/test_table.png");
 }
-.search_nav > .left > span.table.active::before{
+
+.search_nav>.left>span.table.active::before {
     background-image: url("../../../assets/icon/test/test_table_active.png");
 }
-.search_nav > .left > span.list.active::before{
+
+.search_nav>.left>span.list.active::before {
     background-image: url("../../../assets/icon/test/test_list_active.png");
 }
 
-.serach_icon{
+.serach_icon {
     position: absolute;
     right: 12px;
     top: 50%;
@@ -1696,18 +1801,19 @@ export default {
     cursor: pointer;
 }
 
-.student_input >>> .el-input__inner{
+.student_input>>>.el-input__inner {
     padding-right: 35px;
 }
 
 
-.test_data_box{
+.test_data_box {
     display: flex;
     width: calc(100% - 20px);
     margin: 0 auto 15px;
     flex-wrap: wrap;
 }
-.test_data_box > .data_box{
+
+.test_data_box>.data_box {
     width: calc(100% / 4 - (45px / 4));
     height: 150px;
     border: 1px solid #e7e7e7;
@@ -1718,27 +1824,31 @@ export default {
     align-items: center;
 }
 
-.test_data_box > .data_box + .data_box{
+.test_data_box>.data_box+.data_box {
     margin-left: 15px;
 }
-.test_data_box > .data_box > .left{
+
+.test_data_box>.data_box>.left {
     /* width: 110px; */
     min-width: fit-content;
     height: 100%;
 }
-.test_data_box > .data_box > .left > .title{
+
+.test_data_box>.data_box>.left>.title {
     font-size: 16px;
     color: #00000099;
     margin-bottom: 10px;
 }
-.test_data_box > .data_box > .left > .box{
+
+.test_data_box>.data_box>.left>.box {
     display: flex;
     flex-direction: column;
     font-size: 14px;
     height: calc(100% - 30px);
     justify-content: space-between;
 }
-.test_data_box > .data_box > .left > .box2{
+
+.test_data_box>.data_box>.left>.box2 {
     display: flex;
     flex-direction: column;
     font-size: 30px;
@@ -1747,11 +1857,13 @@ export default {
     /* align-items:center; */
     justify-content: center;
 }
-.test_data_box > .data_box > .left > .box > span{
+
+.test_data_box>.data_box>.left>.box>span {
     display: flex;
     align-items: center;
 }
-.test_data_box > .data_box > .left > .box > span::before{
+
+.test_data_box>.data_box>.left>.box>span::before {
     content: '';
     width: 10px;
     height: 10px;
@@ -1760,23 +1872,34 @@ export default {
     margin-right: 5px;
 }
 
-.test_data_box > .data_box > .left > .box > .color1::before{
+.test_data_box>.data_box>.left>.box>.color1::before {
     background: #3673e8;
 }
-.test_data_box > .data_box > .left > .box > .color2::before{
+
+.test_data_box>.data_box>.left>.box>.color2::before {
     background: #61b8ff;
 }
-.test_data_box > .data_box > .left > .box > .color3::before{
+
+.test_data_box>.data_box>.left>.box>.color3::before {
     background: #96d8a8;
 }
-.test_data_box > .data_box > .left > .box > .color4::before{
+
+.test_data_box>.data_box>.left>.box>.color4::before {
     background: #f5b763;
 }
-.test_data_box > .data_box > .right{
+
+.test_data_box>.data_box>.right {
     /* width: calc(100% - 110px); */
     width: calc(100%);
     height: 100%;
 }
 
-</style>
+.el-table>>>.rowClass>td {
+    padding: 7px 0;
+}
+
+.tableClass {
+    width: calc(100% - 20px);
+    margin: 0 auto;
+}</style>
   

src/components/pages/test/shareBox/index.vue

@@ -0,0 +1,258 @@
+<template>
+    <el-dialog title="提醒" :visible.sync="dialogVisibleShare" :append-to-body="true" width="560px"
+        :before-close="handleClose" class="dialog_diy">
+        <div class="share_box">
+            <div class="info_box">
+                <div class="info">
+                    <span>表单名称：</span>
+                    <span>{{ testJson.title }}</span>
+                </div>
+                <div class="info">
+                    <span>表单范围：</span>
+                    <span>{{ testJson.title }}</span>
+                </div>
+                <!-- <div class="info">
+                <span>截止时间：</span>
+                <span>{{ testJson.title }}</span>
+            </div>
+            <div class="info">
+                <span>未完成人数：</span>
+                <span>{{ testJson.title }}</span>
+            </div> -->
+                <div class="info">
+                    <span>已完成人数：</span>
+                    <span>{{ testJson.worksPerson }}</span>
+                </div>
+                <!-- <div class="info">
+                <span>未完成名单：</span>
+                <span>{{ testJson.title }}</span>
+            </div> -->
+            </div>
+            <div class="url_box">
+                <div class="title">
+                    链接提醒
+                </div>
+                <div class="url">
+                    <span>{{ origin }}</span>
+                    <span @click="copy" :data-clipboard-text="copyText" class="tag-read">复制链接</span>
+                </div>
+            </div>
+            <div class="qrcode_box">
+                <div class="title">
+                    二维码提醒
+                </div>
+                <div class="qrcode">
+                    <span class="qrcodeUrl" ref="qrCodeUrl"></span>
+                    <span @click="downQr">下载二维码</span>
+                </div>
+            </div>
+        </div>
+        <!-- <span slot="footer" class="dialog-footer">
+        <el-button @click="close()">关 闭</el-button>
+      </span> -->
+    </el-dialog>
+</template>
+  
+<script>
+import Clipboard from "clipboard";
+import QRCode from "qrcodejs2";
+export default {
+    props: {
+        dialogVisibleShare: {
+            type: Boolean,
+            default: false
+        },
+        testJson: {
+            type: Object
+        },
+    },
+    data() {
+        return {
+            origin: 'https://beta.cloud.cocorobo.cn/',
+            copyText: ""
+        };
+    },
+    methods: {
+        handleClose(done) {
+            this.close();
+            done();
+        },
+        close() {
+            this.$emit("update:dialogVisibleShare", false);
+        },
+        setQr() {
+            setTimeout(() => {
+                this.$refs.qrCodeUrl.innerHTML = "";
+                var qrcode = new QRCode(this.$refs.qrCodeUrl, {
+                    text: "https://beta.cloud.cocorobo.cn/#/testDetail?testid=" + this.testJson.courseId, // 需要转换为二维码的内容
+                    width: 100,
+                    height: 100,
+                    colorDark: "#000000",
+                    colorLight: "#ffffff",
+                    correctLevel: QRCode.CorrectLevel.H,
+                });
+            }, 500);
+        },
+        downQr() {
+
+            // 创建一个虚拟链接，并将 canvas 转换为图片文件
+            const link = document.createElement('a');
+            link.href = this.$refs.qrCodeUrl.querySelector('img').src;
+            link.download = 'qrcode.png';
+
+            // 模拟点击链接进行下载
+            link.click();
+        },
+        copy() {
+            this.copyText = this.origin;
+            var clipboard = new Clipboard(".tag-read");
+            clipboard.on("success", (e) => {
+                this.$message.success("复制成功");
+                console.log("复制成功");
+                clipboard.destroy(); // 释放内存
+            });
+            clipboard.on("error", (e) => {
+                console.log("不支持复制,该浏览器不支持自动复制");
+                clipboard.destroy(); // 释放内存
+            });
+        },
+    },
+    watch: {
+        dialogVisibleShare(newValue, oldValue) {
+            if (newValue) {
+                this.setQr()
+            }
+        }
+    },
+};
+</script>
+  
+<style scoped>
+.dialog_diy>>>.el-dialog {
+    /* height: 100%; */
+    /* margin: 0 auto !important; */
+}
+
+.dialog_diy>>>.el-dialog__header {
+    background: #fff !important;
+    padding: 15px 20px;
+}
+
+.dialog_diy>>>.el-dialog__body {
+    height: calc(100% - 124px);
+    box-sizing: border-box;
+    padding: 0px;
+}
+
+.dialog_diy>>>.el-dialog__title {
+    color: #000;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn {
+    top: 19px;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
+    color: #000;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
+    color: #000;
+}
+
+.dialog_diy>>>.el-dialog__body,
+.dialog_diy>>>.el-dialog__footer {
+    background: #fff;
+}
+
+.share_box {
+    width: 100%;
+    height: 100%;
+    padding: 0 20px 15px;
+    box-sizing: border-box;
+}
+
+.info_box {
+    margin-bottom: 20px;
+}
+
+.info_box>.info {
+    line-height: 18px;
+}
+
+.info_box>.info>span:nth-child(1) {
+    color: #00000099;
+}
+
+.info_box>.info>span:nth-child(2) {
+    color: #000000;
+}
+
+.info_box>.info+.info {
+    margin-top: 10px;
+}
+
+.url_box {
+    margin-bottom: 20px;
+}
+
+.qrcode_box {
+    margin-bottom: 20px;
+}
+
+.url_box>.url {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border: 1px solid #e7e7e7;
+    border-radius: 4px;
+    height: 35px;
+    padding: 0 7px;
+    box-sizing: border-box;
+}
+
+.url_box>.url>span {
+    font-size: 16px;
+    color: #000000;
+}
+
+.url_box>.url>span:nth-child(2) {
+    margin-left: auto;
+    border-left: 1px solid #e7e7e7;
+    padding-left: 7px;
+    cursor: pointer;
+}
+
+.url_box>.title,
+.qrcode_box>.title {
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 10px;
+}
+
+.qrcode_box>.qrcode {
+    padding: 7px;
+    border: 1px solid #e7e7e7;
+    width: fit-content;
+    border-radius: 4px;
+    display: flex;
+    align-items: flex-end;
+}
+
+.qrcode_box>.qrcode>span:nth-child(1) {
+    width: 100px;
+    display: block;
+    height: 100px;
+}
+
+.qrcode_box>.qrcode>span:nth-child(2) {
+    background: #f0f2f5;
+    padding: 7px 15px;
+    font-size: 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #000;
+    margin-left: 7px;
+}
+</style>
+