|
@@ -12,13 +12,17 @@
|
|
slides-per-view="auto"
|
|
slides-per-view="auto"
|
|
:space-between="24"
|
|
:space-between="24"
|
|
@swiper="onSwiper"
|
|
@swiper="onSwiper"
|
|
- style="height: 100%;"
|
|
|
|
|
|
+ style="height: 100%"
|
|
@slideChange="onSlideChange"
|
|
@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="swiperList">
|
|
<div class="itemper" v-for="eleItem in item" :key="eleItem">
|
|
<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 class="text">{{ eleItem.name }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="page">
|
|
<div class="page">
|
|
@@ -33,88 +37,87 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<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 "@/store/caseFile";
|
|
import { addCaseFile } from "../quisk";
|
|
import { addCaseFile } from "../quisk";
|
|
-import draggable from './draggable.vue';
|
|
|
|
|
|
+import draggable from "./draggable.vue";
|
|
const props = defineProps({ caseId: Number });
|
|
const props = defineProps({ caseId: Number });
|
|
const newlist = ref([]);
|
|
const newlist = ref([]);
|
|
const swiperRef = ref(null);
|
|
const swiperRef = ref(null);
|
|
const caseId = ref(props.caseId);
|
|
const caseId = ref(props.caseId);
|
|
-console.log(props);
|
|
|
|
|
|
+
|
|
const addCaseFileHandler = async () => {
|
|
const addCaseFileHandler = async () => {
|
|
- await addCaseFile({ caseId: caseId.value, fileType: 'currentTypeId.value!' });
|
|
|
|
|
|
+ await addCaseFile({ caseId: caseId.value, fileType: "currentTypeId.value!" });
|
|
refresh();
|
|
refresh();
|
|
};
|
|
};
|
|
const changeList = (list) => {
|
|
const changeList = (list) => {
|
|
- let newList = []
|
|
|
|
|
|
+ let newList = [];
|
|
list.map((item, index) => {
|
|
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.push(newItem);
|
|
}
|
|
}
|
|
- })
|
|
|
|
|
|
+ });
|
|
newlist.value = newList;
|
|
newlist.value = newList;
|
|
- console.log('changeList', newList);
|
|
|
|
-}
|
|
|
|
|
|
+ console.log("changeList", newList);
|
|
|
|
+};
|
|
const onSwiper = (swiper) => {
|
|
const onSwiper = (swiper) => {
|
|
swiperRef.value = swiper;
|
|
swiperRef.value = swiper;
|
|
-}
|
|
|
|
|
|
+};
|
|
const onSlideChange = (swiper) => {
|
|
const onSlideChange = (swiper) => {
|
|
console.log(swiper);
|
|
console.log(swiper);
|
|
-}
|
|
|
|
-
|
|
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
-.photo{
|
|
|
|
|
|
+.photo {
|
|
display: flex;
|
|
display: flex;
|
|
height: 100%;
|
|
height: 100%;
|
|
- .left{
|
|
|
|
|
|
+ .left {
|
|
width: 260px;
|
|
width: 260px;
|
|
padding: 16px 24px 30px 0;
|
|
padding: 16px 24px 30px 0;
|
|
height: calc(100% - 46.16px);
|
|
height: calc(100% - 46.16px);
|
|
overflow-y: auto;
|
|
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);
|
|
// 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);
|
|
background-color: var(--bgColor);
|
|
padding-left: 24px;
|
|
padding-left: 24px;
|
|
height: calc(100% - 0px);
|
|
height: calc(100% - 0px);
|
|
- .swiperItem{
|
|
|
|
|
|
+ .swiperItem {
|
|
height: calc(100vh - 155.16px);
|
|
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;
|
|
padding: 0 60px;
|
|
height: 100%;
|
|
height: 100%;
|
|
- .page{
|
|
|
|
|
|
+ .page {
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
- color: rgba(0,0,0,0.85);
|
|
|
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
line-height: 22px;
|
|
line-height: 22px;
|
|
text-align: right;
|
|
text-align: right;
|
|
margin-top: 30px;
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
- .itemper{
|
|
|
|
|
|
+ .itemper {
|
|
height: calc(50% - 100px);
|
|
height: calc(50% - 100px);
|
|
padding: 60px 0 0 0;
|
|
padding: 60px 0 0 0;
|
|
- .text{
|
|
|
|
|
|
+ .text {
|
|
margin-top: 16px;
|
|
margin-top: 16px;
|
|
border-radius: 0px 0px 0px 0px;
|
|
border-radius: 0px 0px 0px 0px;
|
|
- border: 1px dotted #CCCCCC;
|
|
|
|
|
|
+ border: 1px dotted #cccccc;
|
|
text-align: center;
|
|
text-align: center;
|
|
font-family: Microsoft YaHei, Microsoft YaHei;
|
|
font-family: Microsoft YaHei, Microsoft YaHei;
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
line-height: 30px;
|
|
line-height: 30px;
|
|
- color: rgba(0,0,0,0.85);
|
|
|
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
}
|
|
}
|
|
- .itemImg{
|
|
|
|
|
|
+ .itemImg {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: calc(100% - 48px);
|
|
height: calc(100% - 48px);
|
|
display: block;
|
|
display: block;
|