bill 1 year ago
parent
commit
cfcf1f8a5e
2 changed files with 831 additions and 1088 deletions
  1. 793 1053
      pnpm-lock.yaml
  2. 38 35
      src/view/case/photos/index.vue

File diff suppressed because it is too large
+ 793 - 1053
pnpm-lock.yaml


+ 38 - 35
src/view/case/photos/index.vue

@@ -12,13 +12,17 @@
         slides-per-view="auto"
         :space-between="24"
         @swiper="onSwiper"
-        style="height: 100%;"
+        style="height: 100%"
         @slideChange="onSlideChange"
       >
-        <swiper-slide class="swiperItem" v-for="(item,index) in newlist" :key="index">
+        <swiper-slide class="swiperItem" v-for="(item, index) in newlist" :key="index">
           <div class="swiperList">
             <div class="itemper" v-for="eleItem in item" :key="eleItem">
-              <img class="itemImg" src="https://4dscene.4dage.com/new4dkk/v2/lang/images/home/caseList/bwg.png" alt="" />
+              <img
+                class="itemImg"
+                src="https://4dscene.4dage.com/new4dkk/v2/lang/images/home/caseList/bwg.png"
+                alt=""
+              />
               <div class="text">{{ eleItem.name }}</div>
             </div>
             <div class="page">
@@ -33,88 +37,87 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import 'swiper/css';
+import { ref } from "vue";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import "swiper/css";
 // import { addCaseFile } from "@/store/caseFile";
 import { addCaseFile } from "../quisk";
-import draggable from './draggable.vue';
+import draggable from "./draggable.vue";
 const props = defineProps({ caseId: Number });
 const newlist = ref([]);
 const swiperRef = ref(null);
 const caseId = ref(props.caseId);
-console.log(props);
+
 const addCaseFileHandler = async () => {
-  await addCaseFile({ caseId: caseId.value, fileType: 'currentTypeId.value!' });
+  await addCaseFile({ caseId: caseId.value, fileType: "currentTypeId.value!" });
   refresh();
 };
 const changeList = (list) => {
-  let newList = []
+  let newList = [];
   list.map((item, index) => {
-    if(index%2 ==0){
-      let newItem = list[index+1]?[item, list[index+1]]:[item];
+    if (index % 2 == 0) {
+      let newItem = list[index + 1] ? [item, list[index + 1]] : [item];
       newList.push(newItem);
     }
-  })
+  });
   newlist.value = newList;
-  console.log('changeList', newList);
-}
+  console.log("changeList", newList);
+};
 const onSwiper = (swiper) => {
   swiperRef.value = swiper;
-}
+};
 const onSlideChange = (swiper) => {
   console.log(swiper);
-}
-
+};
 </script>
 <style lang="scss" scoped>
-.photo{
+.photo {
   display: flex;
   height: 100%;
-  .left{
+  .left {
     width: 260px;
     padding: 16px 24px 30px 0;
     height: calc(100% - 46.16px);
     overflow-y: auto;
-    background: #FFFFFF;
-    box-shadow: 10px 0 10px -10px rgba(0,0,0,0.15);
+    background: #ffffff;
+    box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.15);
     // box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.15);
   }
-  .right{
-    width: calc(100% - 260px); 
+  .right {
+    width: calc(100% - 260px);
     background-color: var(--bgColor);
     padding-left: 24px;
     height: calc(100% - 0px);
-    .swiperItem{
+    .swiperItem {
       height: calc(100vh - 155.16px);
-      width: calc((100vh - 156.16px)*0.707);
-      background: #FFFFFF;
-      .swiperList{
+      width: calc((100vh - 156.16px) * 0.707);
+      background: #ffffff;
+      .swiperList {
         padding: 0 60px;
         height: 100%;
-        .page{
+        .page {
           font-weight: 400;
           font-size: 12px;
-          color: rgba(0,0,0,0.85);
+          color: rgba(0, 0, 0, 0.85);
           line-height: 22px;
           text-align: right;
           margin-top: 30px;
         }
-        .itemper{
+        .itemper {
           height: calc(50% - 100px);
           padding: 60px 0 0 0;
-          .text{
+          .text {
             margin-top: 16px;
             border-radius: 0px 0px 0px 0px;
-            border: 1px dotted #CCCCCC;
+            border: 1px dotted #cccccc;
             text-align: center;
             font-family: Microsoft YaHei, Microsoft YaHei;
             font-weight: 400;
             font-size: 14px;
             line-height: 30px;
-            color: rgba(0,0,0,0.85);
+            color: rgba(0, 0, 0, 0.85);
           }
-          .itemImg{
+          .itemImg {
             width: 100%;
             height: calc(100% - 48px);
             display: block;