面授连同周边修改

src/components/TwoDimensionalCodeNew.vue

@@ -0,0 +1,342 @@
+<template>
+  <div class="twoDimensionalCode">
+    <!--二维码页面 -->
+    <a-modal
+      :visible="codevisible"
+      :footer="null"
+      :closable="closableQR"
+      wrapClassName="codeModal"
+      style="margin-top: 400px"
+      :zIndex="9999"
+      @cancel="qr_exit"
+    >
+      <div id="qrcode" class="QR">
+        <div class="qr_header"></div>
+        <div class="qr_main">
+          <div class="qrm_header">
+            <span style="title">{{
+              codeInfo.title ? codeInfo.title : ""
+            }}</span>
+            <div class="close_exit" @click="closeCodeModal"></div>
+          </div>
+          <div class="downloadCode" style="">
+            <div class="qrm_body">
+              <div :class="codeInfo.teacherName?'qrm_body_item':''">
+                <div v-if="codeInfo.name&&!codeInfo.teacherName" class="codename">
+                  {{ codeInfo.name ? codeInfo.name : "" }}
+                </div>
+                <div v-if="codeInfo.name&&codeInfo.teacherName" class="codename">
+                  开课：{{ codeInfo.name ? codeInfo.name : "" }}
+                </div>
+                <div v-if="codeInfo.teacherName" class="codename" :title="codeInfo.titleTeacherName">
+                  讲师：{{ codeInfo.teacherName ? codeInfo.teacherName : "" }}
+                </div>
+              </div>
+              <qrcode-vue
+                :value="codeInfo.url.startsWith('/')?(`${domain+codeInfo.url}&t=10`):`${codeInfo.url}&t=10`"
+                :size="qrcodeSize"
+                style="width: 200px; height: 200px"
+              ></qrcode-vue>
+            </div>
+          </div>
+          <div class="codeUrl" :style="{ display: showUrl ? 'flex' : 'flex' }">
+            <div class="codeUrlLink">链接</div>
+            <a-input
+              :value="codeInfo.url.startsWith('/')?`${domain+codeInfo.url}&t=10`:`${codeInfo.url}&t=10`"
+              disabled
+              class="codeUrlInp"
+            />
+            <a-input
+              :value="codeInfo.url.startsWith('/')?`${domain+codeInfo.url}&t=10`:`${codeInfo.url}&t=10`"
+              id="courseUrl"
+              class="codeUrlInp"
+              style="position: absolute; opacity: 0; z-index: -1"
+            />
+            <div @click="copyUrl" class="codeUrlCopy">复制链接</div>
+          </div>
+          <div class="qrm_footer">
+            <span
+              style="color: #387df7; cursor: pointer"
+              @click="downloadQr(200)"
+              >下载二维码</span
+            >
+            <!-- <div class="qrmbtn" @click="downloadQr(200)">
+              <div class="btntext">200*200</div>
+            </div> -->
+            <!-- <div class="qrmbtn" @click="downloadQr(200)">
+              <div class="btntext">400*400</div>
+            </div>
+            <div class="qrmbtn" @click="downloadQr(200)">
+              <div class="btntext">800*800</div>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </a-modal>
+    <!--二维码页面 -->
+  </div>
+</template>
+<script>
+import { reactive, toRefs, watch } from "vue";
+import QrcodeVue from "qrcode.vue";
+import html2canvas from "html2canvas";
+import { message } from "ant-design-vue";
+export default {
+  name: "TwoDimensionalCode",
+  components: {
+    QrcodeVue,
+  },
+  props: {
+    codevisible: {
+      type: Boolean,
+      default: false,
+    },
+    codeInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    index: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(props, ctx) {
+    const state = reactive({
+      qrcodeSize: 800,
+      codeInfo: {},
+      courseUrl: "https://www.baidu.com/",
+      showUrl: false,
+      domain: location.protocol+'//'+location.host
+    });
+
+    //下载二维码图片
+    const downloadQr = (num) => {
+      state.qrcodeSize = num;
+      html2canvas(
+        document.querySelectorAll(".downloadCode")[Number(props.index)],
+        {
+          useCORS: true, //支持图片跨域
+        }
+      ).then((canvas) => {
+        // console.log("canvas", canvas, canvas.width, canvas.style.width);
+        let filename = `${new Date().getTime()}.png`;
+        let imageUrl = canvas.toDataURL("image/png");
+        let a = document.createElement("a");
+        a.style.display = "none";
+        a.download = filename;
+        a.href = imageUrl;
+        document.body.appendChild(a);
+        a.click();
+      });
+      //           let canvas =document.getElementsByClassName('codeModal')[Number(props.index)].getElementsByTagName('canvas')[0];
+      //           let filename = `${new Date().getTime()}.png`;
+      //           let imageUrl = canvas.toDataURL("image/png");
+      //           let a = document.createElement("a");
+      //           a.style.display = "none";
+      //           a.download = filename;
+      //           a.href = imageUrl;
+      //           document.body.appendChild(a);
+      //           a.click();
+    };
+    //复制链接
+    const copyUrl = () => {
+      // const range = document.createRange(); //创建range对象
+      // 	range.selectNode(document.getElementById('courseUrl')); //获取复制内容的 id 选择器
+      // 	const selection = window.getSelection();  //创建 selection对象
+      // 	if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
+      // 	selection.addRange(range); //将range对象添加到selection选区当中，会高亮文本块
+      // 	document.execCommand("Copy"); //复制选中的文字到剪贴板
+      // 	message.success('复制成功')
+      // 	selection.removeRange(range); // 移除选中的元素
+
+      var input = document.createElement("input"); // 创建input对象
+      input.value = state.codeInfo.url.startsWith('/')?(state.domain+state.codeInfo.url):state.codeInfo.url; // 设置复制内容
+      document.body.appendChild(input); // 添加临时实例
+      input.select(); // 选择实例内容
+      document.execCommand("Copy"); // 执行复制
+      document.body.removeChild(input); // 删除临时实例
+      message.success("复制成功！");
+    };
+    const closeCodeModal = () => {
+      ctx.emit("update:codevisible", false);
+    };
+    watch(() => {
+      let obj = {
+        title: "",
+        name: "",
+        url: "",
+        teacherName: "",
+      };
+      state.codeInfo = Object.assign(obj, props.codeInfo);
+      console.log("codeInfo22222", state.codeInfo, props.index, props.type);
+
+      if (props.type === "签到二维码") {
+        state.showUrl = false;
+        console.log(" state.showUrl", state.showUrl);
+      } else if (props.type === "课程二维码") {
+        state.showUrl = true;
+      }
+    });
+    return {
+      ...toRefs(state),
+      downloadQr,
+      closeCodeModal,
+      copyUrl,
+    };
+  },
+};
+</script>
+<style scoped lang="scss">
+.twoDimensionalCode {
+}
+.codeModal {
+  .ant-modal {
+    .ant-modal-content {
+      width: 479px !important;
+      .ant-modal-body {
+        .QR {
+          z-index: 9999;
+          width: 520px;
+          background: #ffffff;
+          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+          position: absolute;
+          left: 50%;
+          top: 10%;
+          transform: translate(-50%, -50%);
+          .qr_header {
+            position: absolute;
+            width: calc(100%);
+            height: 40px;
+            background: linear-gradient(
+              rgba(78, 166, 255, 0.2) 0%,
+              rgba(78, 166, 255, 0) 100%
+            );
+          }
+          .qr_main {
+            width: 100%;
+            position: relative;
+            .qrm_header {
+              display: flex;
+              align-items: center;
+              padding-top: 20px;
+              padding-left: 26px;
+              font-size: 16px;
+              .title {
+                font-size: 16px;
+                font-weight: 600;
+                color: #333333;
+                line-height: 22px;
+              }
+              .close_exit {
+                position: absolute;
+                right: 42px;
+                cursor: pointer;
+                width: 20px;
+                height: 20px;
+                background-image: url(@/assets/images/coursewareManage/close.png);
+                background-size: 100% 100%;
+              }
+            }
+            .qrm_body {
+              width: 100%;
+              padding-top: 22px;
+              padding-bottom: 32px;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              .qrm_body_item{
+                width: 100%;
+                margin-left: 270px;
+              }
+              .codename {
+                font-size: 18px;
+                font-weight: 400;
+                color: #333333;
+                line-height: 25px;
+                margin-bottom: 20px;
+                margin-left: 20px;
+                margin-right: 20px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                max-width: 300px;
+              }
+            }
+            .codeUrl {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-bottom: 24px;
+              .codeUrlLink {
+                width: 72px;
+                height: 40px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 14px;
+                font-weight: 400;
+                color: #c7cbd2;
+                line-height: 20px;
+                border: 1px solid #c7cbd2;
+                border-right: 0px solid #c7cbd2;
+              }
+              .codeUrlInp {
+                width: 305px;
+                height: 40px;
+                border: 1px solid #c7cbd2;
+              }
+              .ant-input-disabled {
+                background-color: rgba(0, 0, 0, 0) !important;
+              }
+              .ant-input[disabled] {
+                background-color: rgba(0, 0, 0, 0) !important;
+              }
+              .codeUrlCopy {
+                width: 96px;
+                height: 40px;
+                background-color: #4ea6ff;
+                border-radius: 8px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 20px;
+                cursor: pointer;
+                margin-left: 8px;
+              }
+            }
+            .qrm_footer {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-bottom: 44px;
+              .qrmbtn {
+                width: 80px;
+                height: 32px;
+                display: flex;
+                line-height: 32px;
+                justify-content: center;
+                border-radius: 4px;
+                border: 1px solid #387df7;
+                // margin-left: 16px;
+                cursor: pointer;
+                .btntext {
+                  color: #387df7;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/student/TableStudent.vue

@@ -196,7 +196,7 @@
         :data-source="tableData.list"
         :pagination="stuPagination"
         :loading="tableData.loading"
-        :scroll="{ x: 1500 }"
+        :scroll="{ x: 'max-content' }"
         row-key="id"
         :row-selection="stuRowSelection"
       >
@@ -467,7 +467,7 @@ const tablecolumns = ref([
     title: "姓名",
     dataIndex: "studentName",
     key: "studentName",
-    width: "10%",
+    width: "160px",
     align: "left",
     className: "h",
     ellipsis: true,
@@ -496,7 +496,7 @@ const tablecolumns = ref([
     title: "工号",
     dataIndex: "studentUserNo",
     key: "studentUserNo",
-    width: "20%",
+    width: "120px",
     align: "center",
     className: "h",
     ellipsis: true,
@@ -505,12 +505,12 @@ const tablecolumns = ref([
     title: "部门",
     dataIndex: "studentDepartName",
     key: "studentDepartName",
-    width: "15%",
+    width: "200px",
     align: "center",
     className: "h",
-    ellipsis: true,
+    customCell  :() => {return {style: {maxWidth: '200px',overflow: 'hidden',whiteSpace: 'nowrap',textOverflow:'ellipsis',cursor:'pointer'}}},
     customRender: ({ record: { studentOrgName, studentDepartName } }) =>
-      allDepartShow(studentOrgName),
+      <a-tooltip color="white" placement="topLeft" title={allDepartShow(studentOrgName)} >{allDepartShow(studentOrgName)}</a-tooltip>
   },
   {
     title: "所属小组",
@@ -525,8 +525,9 @@ const tablecolumns = ref([
     title: "加入方式",
     dataIndex: "source",
     key: "source",
-    width: "10%",
+    width: "120px",
     align: "center",
+    ellipsis: true,
     customRender: ({ record: { source } }) =>
       // ({ 1: "快速添加", 2: "组织", 3: "受众", 4: "报名" }[source]),
       ({
@@ -544,7 +545,8 @@ const tablecolumns = ref([
     title: "操作",
     dataIndex: "operation",
     key: "operation",
-    width: 260,
+    width: '260px',
+    fixed: "right",
     align: "center",
     slots: { customRender: "action" },
   },

src/views/courselibrary/CoursewareManage.vue

@@ -755,7 +755,7 @@
                   v-model:value="selectTime"
                   type="date"
                   style="width: 300px; margin-right: 14px"
-                  :placeholder="['  课程开始时间', '   课程结束时间']"
+                  :placeholder="['  面授开始时间', '   面授结束时间']"
                   :show-time="{
                     defaultValue: [
                       moment('00:00', 'HH:mm'),
@@ -819,7 +819,7 @@
                 <template #action="{ record, column }">
                     <div class="operation">
                       <div class="fb">
-                        <div class="jc" @click="qrcodeVisible(record, 3)" v-if="checkPer(permissions,createId)">
+                        <div class="jc" @click="qrcodeVisible(record, 3)" v-if="checkPer(permissions,createId)&&record.evalFlag">
                           评估码
                         </div>
                         <!--新加 签到 -->
@@ -879,7 +879,7 @@
                         <div class="fb" style="margin-left: -20px">
                           <div class="jc">
                             更多
-                            <down-outlined />
+                            <DownOutlined />
                           </div>
                         </div>
                       </a-dropdown>
@@ -1120,15 +1120,14 @@
             </div>
           </div>
           <div class="cstm_items">
-            <div class="signbox" style="margin-left: 14px;">
+            <div class="signbox">
-              <span style="margin-right: 3px">签到设置：</span>
+              <span style="margin-right: 3px">签到设置</span>
             </div>
             <div style="display: flex; align-items: center">
-              <div style="margin-right: 10px">签到</div>
               <div
                 style="display: flex; align-items: center; margin-right: 20px"
               >
-                <span>开始前：</span>
+                <span style="color: #6d7584">开始前：</span>
                 <a-input-number
                   :min="0"
                   :max="999999"
@@ -1144,7 +1143,7 @@
                 <span style="color: #999999; margin-left: 8px">分钟</span>
               </div>
               <div style="display: flex; align-items: center">
-                <span>开始后：</span>
+                <span style="color: #6d7584">开始后：</span>
                 <a-input-number
                   :min="0"
                   :max="999999"
@@ -1167,16 +1166,16 @@
             </div>
             <div class="b_input">
               <a-checkbox v-model:checked="xjkkradioVEnd" :disabled = "itemType!=3">
-                <span style="color: #6d7584">是否允许自动结业</span>
+                <span style="color: #6d7584;margin-right:16px;">是否允许自动结业</span>
               </a-checkbox>
-              <span>面授时间结束后</span>
+              <span style="color: #6d7584" v-if="xjkkradioVEnd">面授时间结束后</span>
-              <a-input-number :precision="0" :min="0"  v-model:value="xjkkradioVEndTime" style="
+              <a-input-number v-if="xjkkradioVEnd" :precision="0" :min="0"  v-model:value="xjkkradioVEndTime" style="
                 width: 60px;
                 height: 32px;
                 border-radius: 8px;
                 margin: 0 10px;"
               />
-              天
+              <span v-if="xjkkradioVEnd" style="color: #6d7584">天</span>
             </div>
           </div>
           
@@ -1849,7 +1848,7 @@ import ProjectManager from "@/components/project/ProjectManagerNewTeacher";
 import SeeModal from "./components/seeModal.vue";
 import CourseModal from "./courseModal.vue";
 import * as moment from "moment";
-import TwoDimensionalCode from "../../components/TwoDimensionalCode.vue";
+import TwoDimensionalCode from "../../components/TwoDimensionalCodeNew.vue";
 import { codeUrl, toDate } from "@/api/method";
 import { queryWorkDetailById } from "@/api/indexWork";
 import { queryExaminationDetailById } from "@/api/indexExam";
@@ -1863,7 +1862,7 @@ import DropDown from "@/components/common/DropDown";
 import { checkPer, checkOwner } from "@/utils/utils";
 import dayjs from "dayjs";
 import {duration} from "moment";
-import { DeleteOutlined } from '@ant-design/icons-vue';
+import { DeleteOutlined,DownOutlined } from '@ant-design/icons-vue';
 
 //列表表格
 const moreLine = (item) => {
@@ -2032,17 +2031,6 @@ const columns6 = [
     ellipsis: true,
     slots: { customRender: "teacherName" },
   },
-  {
-    title: "时长",
-    dataIndex: "duration",
-    key: "duration",
-    width: "12%",
-    ellipsis: true,
-    align: "center",
-    customRender: ({ text }) => {
-      return text ? Math.floor(text / 60) : "-";
-    },
-  },
   {
     title: "面授时间",
     dataIndex: "starttime",
@@ -2054,6 +2042,17 @@ const columns6 = [
       return text.record.beginTime + ' ~ ' + text.record.endTime
     },
   },
+  {
+    title: "时长",
+    dataIndex: "duration",
+    key: "duration",
+    width: "12%",
+    ellipsis: true,
+    align: "center",
+    customRender: ({ text }) => {
+      return text ? text : "-";
+    },
+  },
   {
     title: "学员数",
     dataIndex: "studentCnt",
@@ -2095,8 +2094,8 @@ const columns6 = [
     width: "10%",
     align: "center",
     ellipsis: true,
-    customRender: ({ text }) => {
+    customRender: ( text ) => {
-      return text ? text : "-";
+      return <a-tooltip color="white" placement="bottom" title = {text.record.createName} >{text.record.createName ? text.record.createName : "-"}</a-tooltip>
     },
   },
   {
@@ -2105,9 +2104,9 @@ const columns6 = [
     key: "saddress",
     width: "30%",
     align: "center",
-    ellipsis: true,
+    customCell:() => {return {style: {maxWidth: '200px',minWidth: '100px',overflow: 'hidden',whiteSpace: 'nowrap',textOverflow:'ellipsis',cursor:'pointer',padding:'0px 10px'}}},
-    customRender: ({ text }) => {
+    customRender: ( {text} ) => {
-      return text ? text : "-";
+      return <a-tooltip color="white" placement="bottom" title = {text} >{text ? text : "-"}</a-tooltip>
     },
   },
   {
@@ -2320,13 +2319,14 @@ export default defineComponent({
     // },
     addOnlineCourse,
     TwoDimensionalCode,
-    DeleteOutlined
+    DeleteOutlined,
+    DownOutlined
   },
   setup() {
     const CourseModalRef = ref(null);
     const store = useStore();
     const sysTypeOptions = computed(() => store.state.content_type);
-    const durationText = computed(() => state.xjkkinputV3?.length?dayjs(state.xjkkinputV3[1]).diff(dayjs(state.xjkkinputV3[0]),'minute'):'请输入持续时间');
+    const durationText = computed(() => state.xjkkinputV3?.length==2?dayjs(state.xjkkinputV3[1]).diff(dayjs(state.xjkkinputV3[0]),'minute')|| '请输入持续时间':'请输入持续时间');
     
     const state = reactive({
       tableCoursePlanLoading: false,
@@ -2981,6 +2981,10 @@ export default defineComponent({
         watch(durationText,(val)=>{
           nums.value++
           if(nums.value>1){
+            if(val == '请输入持续时间'){
+              state.duration = null;
+              return
+            }
             state.duration = val;
           }
     })
@@ -4043,6 +4047,9 @@ function onFocusEnd(){
         message.error('请填写结业时间')
         return
       }
+      if(state.checked4 && !state.assessmentId){
+        return message.error('请选择评估');
+      }
       console.log(postData,'传输的数据')
       // if(!postData.duration){
       //   return message.error("请输入持续时间");
@@ -4133,7 +4140,7 @@ function onFocusEnd(){
       state.stuColumns = [
         {
           title: "岗位",
-          width: "8%",
+          width: "160px",
           dataIndex: "studentJobName",
           key: "7",
           align: "center",
@@ -4151,10 +4158,11 @@ function onFocusEnd(){
         },
         {
           title: "Band",
-          width: "8%",
+          width: "120px",
           dataIndex: "studentBandDesc",
           key: "7",
           align: "center",
+          ellipsis: true,
           customRender: (text) => {
             return (
               <div class="racona">
@@ -4167,10 +4175,11 @@ function onFocusEnd(){
         },
         {
           title: "报名状态",
-          width: "8%",
+          width: "120px",
           dataIndex: "status",
           key: "5",
           align: "center",
+          ellipsis: true,
           customRender: ({ record }) => {
             switch (String(record.status)) {
               case "0":
@@ -4185,28 +4194,31 @@ function onFocusEnd(){
 
         {
           title: "签到状态",
-          width: "8%",
+          width: "120px",
           dataIndex: "signstatus",
           key: "7",
           align: "center",
+          ellipsis: true,
           customRender: ({ record }) =>
             record.signStatus ? "已签到" : "未签到",
         },
         {
           title: "评估状态",
-          width: "8%",
+          width: "120px",
           dataIndex: "evastatus",
           key: "8",
           align: "center",
+          ellipsis: true,
           customRender: ({ record }) =>
             record.assessmentStatus?"已评估" : "未评估",
         },
         {
           title: "评分",
-          width: "8%",
+          width: "120px",
           dataIndex: "studentScore",
           key: "8",
           align: "center",
+          ellipsis: true,
           customRender: ({ record }) => {
             return (
               <div class="racona">
@@ -4270,36 +4282,39 @@ function onFocusEnd(){
         // },
         {
           title: "作业状态",
-          width: "8%",
+          width: "120px",
           dataIndex: "workStatus",
           key: "5",
           align: "center",
+          ellipsis: true,
           customRender: ({ record }) => {
             switch (String(record.workStatus)) {
               case "null":
-                return "未完成";
+                return "未提交";
               case "0":
-                return "未完成";
+                return "未提交";
               case "1":
-                return "已完成";
+                return "已提交";
               case "2":
-                return "未完成";
+                return "未提交";
             }
           },
         },
         {
           title: "考试成绩",
-          width: "8%",
+          width: "120px",
           dataIndex: "examinationScore",
           key: "8",
           align: "center",
+          ellipsis: true,
         },
         {
           title: "结业状态",
-          width: "15%",
+          width: "120px",
           dataIndex: "completionStatus",
           key: "8",
           align: "center",
+          ellipsis: true,
           customRender: ({ record }) => {
             return (
               <div>
@@ -5222,11 +5237,11 @@ function onFocusEnd(){
     const qrcodeVisible = (record, type) => {
       // `${location.protocol}//${location.host}${import.meta.env.VUE_APP_BASE_API}/stu/project/redirectDetail?courseId=${record.id}`
       state.codevisible = true;
-      let teacherNames = record.offteachers?.filter(teacher => teacher.teacherName !== null).map(teacher => teacher.teacherName);
+      let teacherNames = record.offteachers?.filter(teacher => teacher.name !== null).map(teacher => teacher.name);
       state.codeInfo = {
         title: type == 1 ? "【课程】二维码" : type == 2 ? "【签到】二维码" : "【评估】二维码",
-        name: record.name ? record.name + type == 2 ?'签到' : '评估' : "",
+        name: record.name,
-        teacherName: teacherNames.length > 0 ? teacherNames.join(' ') : "",
+        teacherName: teacherNames.length > 3 ? teacherNames.slice(0,3).join(',')+'...' : teacherNames.join(','),
         url:
           type == 1
             ? process.env.VUE_APP_BASE_API +
@@ -5236,7 +5251,8 @@ function onFocusEnd(){
                 record.id
               }&taskType=${2}&type=${3}&openCourseId=${
                 record.id
-              }` : `${location.protocol}//${location.host}/student-h5/investigatpage?id=${record.id}&type=3&infoId=${record.id}&courseId=${record.assessmentId}&chapterOrStageId=0&level=${record.name}`
+              }` : `${location.protocol}//${location.host}/student-h5/investigatpage?id=${record.id}&type=3&infoId=${record.id}&courseId=${record.assessmentId}&chapterOrStageId=0&level=${record.name}`,
+        titleTeacherName: moreLine(record.offteachers),
       };
       console.log("codeInfo", state.codeInfo, record);
       state.codeIndex = 0;
@@ -7585,8 +7601,9 @@ function onFocusEnd(){
               }
 
               .stmm_i5 {
-                display: flex;
+                // display: flex;
-                justify-content: space-between;
+                // justify-content: space-between;
+                margin-right: 20px;
               }
 
               .stmm_i6 {