fix：设计：热区题
This commit is contained in:
王博冉
1
src/assets/svg/imageCard/delete.svg
Normal file
1
src/assets/svg/imageCard/delete.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><defs><clipPath id="master_svg0_1_206"><rect x="1" y="1.7999999523162842" width="15" height="15" rx="0"/></clipPath></defs><g><g></g><g clip-path="url(#master_svg0_1_206)"><g><path d="M8.608979218750001,1.7999999523162842C7.12260921875,1.7999999523162842,5.91260921875,2.980449952316284,5.86169921875,4.459999952316284L2.39261121875,4.459999952316284C2.01308421875,4.469669952316284,1.71044921875,4.780119952316284,1.71044921875,5.159769952316284C1.7104492902756,5.539419952316284,2.01308421875,5.8498699523162845,2.39261121875,5.859549952316284L3.16533921875,5.859549952316284L3.16533921875,13.701399952316285C3.16533921875,15.173199952316285,4.16351921875,16.375899952316285,5.39533921875,16.375899952316285L11.67715921875,16.375899952316285C12.90894921875,16.375899952316285,13.90764921875,15.180499952316284,13.90764921875,13.701399952316285L13.90764921875,5.866819952316284L14.60714921875,5.866819952316284C14.98664921875,5.857149952316284,15.28934921875,5.546699952316285,15.28934921875,5.167049952316284C15.28934921875,4.787389952316284,14.98664921875,4.476949952316284,14.60714921875,4.467269952316284L11.34942921875,4.467269952316284C11.30956921875,2.982739952316284,10.09458921875,1.799999861388384,8.60942921875,1.7999999523162842L8.608979218750001,1.7999999523162842ZM7.17351921875,4.459999952316284C7.22038921875,3.701629952316284,7.84960921875,3.1108499523162845,8.60942921875,3.111819952316284C9.368609218749999,3.1090199523162845,9.99668921875,3.701909952316284,10.03760921875,4.459999952316284L7.17351921875,4.459999952316284ZM5.39533921875,15.064099952316283C4.9580692187499995,15.064099952316283,4.47715921875,14.502699952316284,4.47715921875,13.701399952316285L4.47715921875,5.866819952316284L12.59534921875,5.866819952316284L12.59534921875,13.708599952316284C12.59534921875,14.509999952316285,12.11484921875,15.071399952316284,11.67715921875,15.071399952316284L5.39533921875,15.071399952316284L5.39533921875,15.064099952316283Z" fill="#70B936" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M6.789969109375,13.380469483566284C7.110878109375,13.380469483566284,7.373147109375,13.060019483566284,7.373147109375,12.659109483566283L7.373147109375,8.540928483566285C7.373147109375,8.140928483566285,7.110878109375,7.820019483566284,6.789969109375,7.820019483566284C6.469514109375,7.820019483566284,6.206787109375,8.140474483566285,6.206787109375,8.541382483566284L6.206787109375,12.659109483566283C6.206787109375,13.060019483566284,6.462241109375,13.380469483566284,6.789969109375,13.380469483566284ZM10.267237109375,13.380469483566284C10.587697109375,13.380469483566284,10.849967109375001,13.060019483566284,10.849967109375001,12.659109483566283L10.849967109375001,8.540928483566285C10.849967109375001,8.140928483566285,10.587697109375,7.820019483566284,10.267237109375,7.820019483566284C9.946337109375,7.820019483566284,9.684057109375,8.140474483566285,9.684057109375,8.541382483566284L9.684057109375,12.659109483566283C9.684057109375,13.060019483566284,9.946337109375,13.380469483566284,10.267237109375,13.380469483566284Z" fill="#70B936" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
1
src/assets/svg/imageCard/picture.svg
Normal file
1
src/assets/svg/imageCard/picture.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.6 KiB |
1
src/assets/svg/imageCard/scissor.svg
Normal file
1
src/assets/svg/imageCard/scissor.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="19" viewBox="0 -0.5999755859375 18 19"><defs><clipPath id="master_svg0_1_202"><rect x="2" y="2.5999755859375" width="14" height="14" rx="0"/></clipPath></defs><g><g></g><g clip-path="url(#master_svg0_1_202)"><g><path d="M2,9.0615234375L3.4,9.0615234375L3.4,10.1384434375L2,10.1384434375L2,9.0615234375ZM11.8,9.0615234375L13.2,9.0615234375L13.2,10.1384434375L11.8,10.1384434375L11.8,9.0615234375ZM4.8,9.0615234375L6.2,9.0615234375L6.2,10.1384434375L4.8,10.1384434375L4.8,9.0615234375ZM14.6,9.0615234375L16,9.0615234375L16,10.1384434375L14.6,10.1384434375L14.6,9.0615234375Z" fill="#70B936" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M9.10662,10.5799755859375L10.10169,9.5999755859375L16,3.7899755859375C15.4547,3.2302345859375,14.5552,3.2302345859375,14.0098,3.7899755859375L9.10769,8.6199755859375L7.25862,6.7999755859375C7.54292,6.379975585937499,7.68508,5.8899755859375,7.68508,5.3999755859375C7.68508,3.8599755859375,6.40677,2.5999755859375,4.8420000000000005,2.5999755859375C3.2793799999999997,2.5999755859375,2,3.8599755859375,2,5.3999755859375C2,6.9399755859375,3.2783100000000003,8.1999755859375,4.8430800000000005,8.1999755859375C5.3406199999999995,8.1999755859375,5.838150000000001,8.0599755859375,6.26462,7.7799755859375L8.11262,9.5999755859375L6.26462,11.4199755859375C5.84178,11.1445355859375,5.34771,10.9985555859375,4.8430800000000005,10.9999755859375C3.2783100000000003,10.9999755859375,2,12.2599755859375,2,13.7999755859375C2,15.3399755859375,3.2783100000000003,16.5999755859375,4.8430800000000005,16.5999755859375C6.40677,16.5999755859375,7.68508,15.3399755859375,7.68508,13.7999755859375C7.68508,13.3099755859375,7.54292,12.8199755859375,7.25969,12.3999755859375L9.10769,10.5799755859375L9.10662,10.5799755859375ZM3.4204600000000003,5.3999755859375C3.4204600000000003,4.629975585937499,4.06123,3.9999755859375,4.8420000000000005,3.9999755859375C5.62385,3.9999755859375,6.26354,4.629975585937499,6.26354,5.3999755859375C6.26354,6.1699755859375,5.62385,6.7999755859375,4.8420000000000005,6.7999755859375C4.06123,6.7999755859375,3.4204600000000003,6.1699755859375,3.4204600000000003,5.3999755859375ZM4.8420000000000005,15.1999755859375C4.06123,15.1999755859375,3.4204600000000003,14.5699755859375,3.4204600000000003,13.7999755859375C3.4204600000000003,13.0299755859375,4.06123,12.3999755859375,4.8420000000000005,12.3999755859375C5.62385,12.3999755859375,6.26354,13.0299755859375,6.26354,13.7999755859375C6.26354,14.5699755859375,5.62385,15.1999755859375,4.8420000000000005,15.1999755859375ZM10.10169,11.5599755859375L14.0109,15.4099755859375C14.5795,15.9699755859375,15.4325,15.9699755859375,16,15.4099755859375L11.09677,10.5799755859375L10.10169,11.5599755859375Z" fill="#70B936" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -44,17 +44,20 @@
|
||||
:onload="setRect"
|
||||
:class="isHotArea ? '' : 'photo-item-picture'"
|
||||
/>
|
||||
<div class="photo-btn-list" v-if="!isremove && !edit && !info?.permissions?.disable_option_update && !readonly">
|
||||
<a-button
|
||||
<div class="new-photo-btn-list" v-if="!isremove && !edit && !info?.permissions?.disable_option_update && !readonly">
|
||||
<!-- <a-button
|
||||
type="text"
|
||||
class="photo-btn-item boder-right"
|
||||
@click="addArea"
|
||||
:disabled="info.associate.length > 0"
|
||||
>
|
||||
<border-outer-outlined /> 添加选区</a-button
|
||||
>
|
||||
<a-button type="text" :disabled="disabledCropImage" class="photo-btn-item boder-right" @click="shear">
|
||||
<scissor-outlined /> 裁剪图片
|
||||
> -->
|
||||
<a-button type="text" :disabled="disabledCropImage" class="photo-btn-item boder-bottom" @click="shear">
|
||||
<!-- <scissor-outlined /> -->
|
||||
<span style="margin-bottom: 6px;">
|
||||
<img src="@/assets/svg/imageCard/scissor.svg" />
|
||||
</span>
|
||||
</a-button>
|
||||
|
||||
<UpLoad
|
||||
@@ -69,11 +72,19 @@
|
||||
:count="count"
|
||||
:disabled="disabledReplaceImage"
|
||||
>
|
||||
<a-button :disabled="disabledReplaceImage" type="text" class="white"> <picture-outlined />替换图片 </a-button>
|
||||
<a-button :disabled="disabledReplaceImage" type="text" class="photo-btn-item">
|
||||
<span style="margin-bottom: 6px;">
|
||||
<!-- <picture-outlined /> -->
|
||||
<img src="@/assets/svg/imageCard/picture.svg" />
|
||||
</span>
|
||||
</a-button>
|
||||
</UpLoad>
|
||||
|
||||
<a-button type="text" :disabled="disabledRemoveImage" class="photo-btn-item boder-left">
|
||||
<span @click="remove()"> <delete-outlined /> 删除图片</span>
|
||||
<a-button type="text" :disabled="disabledRemoveImage" class="photo-btn-item boder-top">
|
||||
<span @click="remove()" style="margin-bottom: 6px;">
|
||||
<!-- <delete-outlined /> -->
|
||||
<img src="@/assets/svg/imageCard/delete.svg" />
|
||||
</span>
|
||||
</a-button>
|
||||
</div>
|
||||
<div
|
||||
@@ -136,10 +147,10 @@ import ImageArea from "./ImageArea";
|
||||
export default {
|
||||
components: {
|
||||
UpLoad,
|
||||
ScissorOutlined,
|
||||
PictureOutlined,
|
||||
DeleteOutlined,
|
||||
BorderOuterOutlined,
|
||||
// ScissorOutlined,
|
||||
// PictureOutlined,
|
||||
// DeleteOutlined,
|
||||
// BorderOuterOutlined,
|
||||
ImgCropper,
|
||||
ImageArea,
|
||||
},
|
||||
@@ -486,6 +497,10 @@ export default {
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const uploadShowAddArea = computed(() => {
|
||||
return item.value && item.value?.type === 0 && !isremove.value && !edit.value && !props.info?.permissions?.disable_option_update && !props.readonly
|
||||
});
|
||||
|
||||
return {
|
||||
edit,
|
||||
item,
|
||||
@@ -510,6 +525,7 @@ export default {
|
||||
update,
|
||||
setRect,
|
||||
rect,
|
||||
uploadShowAddArea
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -565,7 +581,8 @@ export default {
|
||||
justify-items: center;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
// height: 0;
|
||||
height: 42px;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
@@ -597,6 +614,42 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.new-photo-btn-list {
|
||||
position: absolute;
|
||||
right: -56px;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
flex-flow: column;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
width: 38px;
|
||||
height: 114px;
|
||||
border-radius: 6px;
|
||||
opacity: 1;
|
||||
|
||||
background: #EAF7E0;
|
||||
color: #70B936;
|
||||
|
||||
.photo-btn-item {
|
||||
color: #70B936;
|
||||
height: 33.3%;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.boder-bottom {
|
||||
border-bottom: 0.5px solid #70B936;
|
||||
}
|
||||
|
||||
.boder-top {
|
||||
border-top: 0.5px solid #70B936;
|
||||
}
|
||||
}
|
||||
|
||||
.photo-progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@@ -20,9 +20,21 @@
|
||||
v-model:type="formModal.type"
|
||||
:isHotArea="true"
|
||||
:info="info"
|
||||
ref="imageCardRef"
|
||||
></ImageCard>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<a-button
|
||||
v-if="isShowAddArea"
|
||||
type="text"
|
||||
class="custom-button"
|
||||
@click="addAredHandle"
|
||||
>
|
||||
<div class="flex-align">
|
||||
<i class="iconfont" ></i>
|
||||
<span style="margin-left: 6px">添加选区</span>
|
||||
</div>
|
||||
</a-button>
|
||||
<logical :info="info" />
|
||||
<related-option v-if="!quiz?.permissions?.disable_option_update" :info="info" title="选区关联" questions_type="25,26" />
|
||||
<option-show v-if="!quiz?.permissions?.disable_option_update" :info="info" modalTitleText="选区显示" addBtnText="添加选区显示">
|
||||
@@ -128,6 +140,14 @@ export default {
|
||||
context.emit("update", value);
|
||||
};
|
||||
|
||||
const imageCardRef = ref()
|
||||
|
||||
// 添加选区
|
||||
const addAredHandle = () => {
|
||||
imageCardRef.value.addArea()
|
||||
}
|
||||
|
||||
const isShowAddArea = computed(() => imageCardRef?.value?.uploadShowAddArea)
|
||||
return {
|
||||
formModal,
|
||||
removeOption,
|
||||
@@ -135,7 +155,10 @@ export default {
|
||||
onShowWH,
|
||||
changeArea,
|
||||
update,
|
||||
quiz
|
||||
quiz,
|
||||
imageCardRef,
|
||||
addAredHandle,
|
||||
isShowAddArea,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user