2023-11-22-1
This commit is contained in:
11
package-lock.json
generated
11
package-lock.json
generated
@@ -13,6 +13,7 @@
|
||||
"ant-design-vue": "^3.2.12",
|
||||
"axios": "^1.4.0",
|
||||
"core-js": "^3.8.3",
|
||||
"driver.js": "^1.3.1",
|
||||
"element-plus": "^2.4.2",
|
||||
"file-saver": "^2.0.5",
|
||||
"html2canvas": "^1.4.1",
|
||||
@@ -5445,6 +5446,11 @@
|
||||
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/driver.js": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/driver.js/-/driver.js-1.3.1.tgz",
|
||||
"integrity": "sha512-MvUdXbqSgEsgS/H9KyWb5Rxy0aE6BhOVT4cssi2x2XjmXea6qQfgdx32XKVLLSqTaIw7q/uxU5Xl3NV7+cN6FQ=="
|
||||
},
|
||||
"node_modules/duplexer": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
|
||||
@@ -16565,6 +16571,11 @@
|
||||
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
|
||||
"dev": true
|
||||
},
|
||||
"driver.js": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/driver.js/-/driver.js-1.3.1.tgz",
|
||||
"integrity": "sha512-MvUdXbqSgEsgS/H9KyWb5Rxy0aE6BhOVT4cssi2x2XjmXea6qQfgdx32XKVLLSqTaIw7q/uxU5Xl3NV7+cN6FQ=="
|
||||
},
|
||||
"duplexer": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
"ant-design-vue": "^3.2.12",
|
||||
"axios": "^1.4.0",
|
||||
"core-js": "^3.8.3",
|
||||
"driver.js": "^1.3.1",
|
||||
"element-plus": "^2.4.2",
|
||||
"file-saver": "^2.0.5",
|
||||
"html2canvas": "^1.4.1",
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4292253 */
|
||||
src: url('iconfont.woff2?t=1700017557054') format('woff2'),
|
||||
url('iconfont.woff?t=1700017557054') format('woff'),
|
||||
url('iconfont.ttf?t=1700017557054') format('truetype');
|
||||
src: url('iconfont.woff2?t=1700554220413') format('woff2'),
|
||||
url('iconfont.woff?t=1700554220413') format('woff'),
|
||||
url('iconfont.ttf?t=1700554220413') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@@ -13,6 +13,14 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-bingji:before {
|
||||
content: "\e620";
|
||||
}
|
||||
|
||||
.icon-bingji1:before {
|
||||
content: "\e668";
|
||||
}
|
||||
|
||||
.icon-biaoqian:before {
|
||||
content: "\e603";
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
@@ -127,7 +127,7 @@ li {
|
||||
--el-cascader-tag-background: #e1d9ec;
|
||||
--el-fill-color: #e1d9ec;
|
||||
height: 80%;
|
||||
width: 80% !important;
|
||||
width: 90% !important;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -159,7 +159,8 @@ li {
|
||||
--el-cascader-menu-selected-text-color: #000;
|
||||
}
|
||||
.el-popper .el-cascader-panel .el-scrollbar {
|
||||
min-width: 18rem;
|
||||
min-width: 19rem;
|
||||
max-width: 19rem;
|
||||
}
|
||||
.el-popper .el-cascader-panel .el-scrollbar .el-cascader-menu__wrap {
|
||||
height: 24.4rem;
|
||||
|
||||
@@ -141,7 +141,7 @@ ul,li{
|
||||
--el-cascader-tag-background:#e1d9ec;
|
||||
--el-fill-color:#e1d9ec;
|
||||
height: 80%;
|
||||
width: 80% !important;
|
||||
width: 90% !important;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
.el-tag--light{
|
||||
@@ -173,7 +173,8 @@ ul,li{
|
||||
.el-cascader-panel{
|
||||
--el-cascader-menu-selected-text-color: #000;
|
||||
.el-scrollbar{
|
||||
min-width: 18rem;
|
||||
min-width: 19rem;
|
||||
max-width: 19rem;
|
||||
.el-cascader-menu__wrap{
|
||||
height: 24.4rem;
|
||||
.el-cascader-menu__list{
|
||||
|
||||
@@ -39,14 +39,14 @@
|
||||
<a-dropdown @click.stop="setOpenType('sex')">
|
||||
<a-button>
|
||||
<UserOutlined />
|
||||
{{ workspaceItem.sex }}
|
||||
{{ workspaceItem.sex.label }}
|
||||
<DownOutlined />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
<div class="habit_model_show habit_sex_show" v-fade="openType.sex">
|
||||
<ul class="habit_model_list">
|
||||
<li v-for="item,index in sex">
|
||||
<div @click.stop="setSex(item.value)">{{ item.label }}</div>
|
||||
<div @click.stop="setSex(item)">{{ item.label }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -334,7 +334,7 @@ export default defineComponent({
|
||||
let arr:any = []
|
||||
rv.forEach((item:any) => {
|
||||
let obj = {
|
||||
value:item.name,
|
||||
value:item.key,
|
||||
label:item.name,
|
||||
}
|
||||
arr.push(obj)
|
||||
@@ -548,7 +548,8 @@ export default defineComponent({
|
||||
},
|
||||
setSex(v:any){
|
||||
this.openType.sex = false
|
||||
this.workspaceItem.sex = v
|
||||
this.workspaceItem.sex.value = v.value
|
||||
this.workspaceItem.sex.label = v.label
|
||||
this.getMannequins()
|
||||
this.setMannequinsSex()
|
||||
this.getPosition('sex')
|
||||
@@ -563,11 +564,11 @@ export default defineComponent({
|
||||
// this.workspaceItem.mannequinId = item.id
|
||||
// this.workspaceItem.mannequinType = str
|
||||
// this.workspaceItem.mannequinUrl = item.presignedUrl
|
||||
if(this.workspaceItem.sex == 'Female'){
|
||||
if(this.workspaceItem.sex.value == 'FEMALE'){
|
||||
this.workspaceItem.femalePresignedUrl = item.presignedUrl
|
||||
this.workspaceItem.mannequinFemaleType = str
|
||||
this.workspaceItem.mannequinFemaleId = item.id
|
||||
}else if(this.workspaceItem.sex == 'Male'){
|
||||
}else if(this.workspaceItem.sex.value == 'MALE'){
|
||||
this.workspaceItem.malePresignedUrl = item.presignedUrl
|
||||
this.workspaceItem.mannequinMaleType = str
|
||||
this.workspaceItem.mannequinMaleId = item.id
|
||||
@@ -577,11 +578,11 @@ export default defineComponent({
|
||||
this.workspaceItem.mannequinId = item.id
|
||||
},
|
||||
setMannequinsSex(){
|
||||
if(this.workspaceItem.sex == 'Female'){
|
||||
if(this.workspaceItem.sex.value == 'FEMALE'){
|
||||
this.workspaceItem.mannequinUrl = this.workspaceItem.femalePresignedUrl
|
||||
this.workspaceItem.mannequinType = this.workspaceItem.mannequinFemaleType
|
||||
this.workspaceItem.mannequinId = this.workspaceItem.mannequinFemaleId
|
||||
}else if(this.workspaceItem.sex == 'Male'){
|
||||
}else if(this.workspaceItem.sex.value == 'MALE'){
|
||||
this.workspaceItem.mannequinUrl = this.workspaceItem.malePresignedUrl
|
||||
this.workspaceItem.mannequinType = this.workspaceItem.mannequinMaleType
|
||||
this.workspaceItem.mannequinId = this.workspaceItem.mannequinMaleId
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(3)"
|
||||
class="switch_type_item"
|
||||
class="switch_type_item Guide_1_4"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>{{ $t('MoodboardUpload.Generate') }}</span>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div v-if="showCollectionModal">
|
||||
<a-modal class="modal_component collection_modal"
|
||||
<a-modal class="modal_component collection_modal Guide_1_2"
|
||||
v-model:visible="showCollectionModal"
|
||||
:footer="null"
|
||||
width="65%"
|
||||
|
||||
@@ -55,11 +55,14 @@ export default {
|
||||
jsContent3:'导出文件失败。',
|
||||
},
|
||||
LibraryPage:{
|
||||
Organize:'喜欢',
|
||||
Upload:'上传',
|
||||
Generate:'生成',
|
||||
Delete:'删除',
|
||||
Rename:'重命名',
|
||||
inputContent1:'输入名字进行搜索',
|
||||
intersection:'交集',
|
||||
unionSet:'并集',
|
||||
all:'全选',
|
||||
ImageOnly:'图片',
|
||||
TextOnly:'文字',
|
||||
|
||||
@@ -55,11 +55,14 @@ export default {
|
||||
jsContent3:'Failed to export the file',
|
||||
},
|
||||
LibraryPage:{
|
||||
Organize:'Organize',
|
||||
Upload:'Upload',
|
||||
Generate:'Generate',
|
||||
Delete:'Delete',
|
||||
Rename:'Rename',
|
||||
inputContent1:'Search by your style code',
|
||||
intersection:'intersection',
|
||||
unionSet:'union set',
|
||||
all:'all',
|
||||
ImageOnly:'Image Only',
|
||||
TextOnly:'Text Only',
|
||||
@@ -201,7 +204,7 @@ export default {
|
||||
Delete:'Delete',
|
||||
Maximum:'Maximum 8 images can be uploaded, Maximum 2M per image',
|
||||
Thumbnail:'Thumbnail preview of selected moodboard',
|
||||
layout:'layout',
|
||||
layout:'Layout',
|
||||
jsContent1:'You can select up to 8 images',
|
||||
jsContent2:"upload failed",
|
||||
jsContent3:"You can only upload Image file!",
|
||||
|
||||
@@ -56,11 +56,14 @@ export default {
|
||||
jsContent3:"Échec de l'exportation du fichier",
|
||||
},
|
||||
LibraryPage:{
|
||||
Organize:'Organiser',
|
||||
Upload:'Télécharger',
|
||||
Generate:'Générer',
|
||||
Delete:'Supprimer',
|
||||
Rename:'Renommer',
|
||||
inputContent1:'Recherchez par votre code de style',
|
||||
intersection:'intersection',
|
||||
unionSet:"ensemble d'unions",
|
||||
all:'tout',
|
||||
ImageOnly:'Image uniquement',
|
||||
TextOnly:'Texte seulement',
|
||||
|
||||
@@ -55,11 +55,14 @@ export default {
|
||||
jsContent3:'Impossibile esportare il file',
|
||||
},
|
||||
LibraryPage:{
|
||||
Organize:'Organizzare',
|
||||
Upload:'Caricamento',
|
||||
Generate:'creare',
|
||||
Delete:'Eliminare',
|
||||
Rename:'Rinominare',
|
||||
inputContent1:'Search by your style code',
|
||||
intersection:'intersezione',
|
||||
unionSet:'insieme di unione',
|
||||
all:'Tutto',
|
||||
ImageOnly:'Solo immagine',
|
||||
TextOnly:'Solo testo',
|
||||
|
||||
@@ -55,11 +55,14 @@ export default {
|
||||
jsContent3:'ファイルのエクスポートに失敗しました',
|
||||
},
|
||||
LibraryPage:{
|
||||
Organize:'編成',
|
||||
Upload:'アップロード',
|
||||
Generate:'生成する',
|
||||
Delete:'消去',
|
||||
Rename:'名前の変更',
|
||||
inputContent1:'スタイルコードで検索',
|
||||
intersection:'交差点',
|
||||
unionSet:'ユニオンセット',
|
||||
all:'全て',
|
||||
ImageOnly:'画像のみ',
|
||||
TextOnly:'テキストのみ',
|
||||
|
||||
@@ -55,11 +55,14 @@ export default {
|
||||
jsContent3:'파일을 내보내지 못했습니다.',
|
||||
},
|
||||
LibraryPage:{
|
||||
Organize:'구성',
|
||||
Upload:'업로드',
|
||||
Generate:'생성하다',
|
||||
Delete:'삭제',
|
||||
Rename:'이름 바꾸기',
|
||||
inputContent1:'스타일 코드로 검색',
|
||||
intersection:'교차로',
|
||||
unionSet:'결합 세트',
|
||||
all:'모두',
|
||||
ImageOnly:'이미지만',
|
||||
TextOnly:'텍스트만',
|
||||
|
||||
@@ -55,11 +55,14 @@ export default {
|
||||
jsContent3:'Не удалось экспортировать файл',
|
||||
},
|
||||
LibraryPage:{
|
||||
Organize:'Организовать',
|
||||
Upload:'Загрузить',
|
||||
Generate:'Генерировать',
|
||||
Delete:'Удалить',
|
||||
Rename:'Переименовать',
|
||||
inputContent1:'Поиск по коду вашего стиля',
|
||||
intersection:'пересечение',
|
||||
unionSet:'набор объединений',
|
||||
all:'all',
|
||||
ImageOnly:'Только изображение',
|
||||
TextOnly:'Только текст',
|
||||
|
||||
@@ -55,11 +55,14 @@ export default {
|
||||
jsContent3:'ล้มเหลวในการส่งออกไฟล์',
|
||||
},
|
||||
LibraryPage:{
|
||||
Organize:'จัดระเบียบ',
|
||||
Upload:'อัปโหลด',
|
||||
Generate:'กำเนิด',
|
||||
Delete:'ลบ',
|
||||
Rename:'เปลี่ยนชื่อ',
|
||||
inputContent1:'ค้นหาตามรหัสสไตล์ของคุณ',
|
||||
intersection:'แยก',
|
||||
unionSet:'ชุดยูเนี่ยน',
|
||||
all:'ทั้งหมด',
|
||||
ImageOnly:'รูปภาพเท่านั้น',
|
||||
TextOnly:'ข้อความเท่านั้น',
|
||||
|
||||
@@ -55,11 +55,14 @@ export default {
|
||||
jsContent3:'Không xuất được tệp',
|
||||
},
|
||||
LibraryPage:{
|
||||
Organize:'Tổ chức',
|
||||
Upload:'Tải lên',
|
||||
Generate:'Phát ra',
|
||||
Delete:'Xóa bỏ',
|
||||
Rename:'Đổi tên',
|
||||
inputContent1:'Tìm kiếm theo mã kiểu của bạn',
|
||||
intersection:'ngã tư',
|
||||
unionSet:'bộ đoàn',
|
||||
all:'tất cả',
|
||||
ImageOnly:'Chỉ hình ảnh',
|
||||
TextOnly:'Chỉ văn bản',
|
||||
|
||||
41
src/tool/guide.js
Normal file
41
src/tool/guide.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import { driver } from "driver.js";
|
||||
import "driver.js/dist/driver.css";
|
||||
//版本一
|
||||
const driverObj__ = driver({
|
||||
steps: [
|
||||
{ element: '#Guide_1_1', popover: { title: 'Title', description: 'Description' } },
|
||||
{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
|
||||
{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
|
||||
{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
|
||||
{ element: '.Guide_1_4', popover: { title: 'Title', description: 'Description' } },
|
||||
],
|
||||
// showProgress: true,//控制总页数和当前页数是否显示
|
||||
allowClose:false,
|
||||
showButtons:false,
|
||||
stagePadding:10,//切口到元素的距离
|
||||
stageRadius:5,//切口圆弧度
|
||||
allowKeyboardControl:true,//控制是否可以键盘控制下一步
|
||||
disableActiveInteraction:false,//是否禁用显示元素的交互
|
||||
// overlay: true,
|
||||
onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
|
||||
console.log(popover,options);
|
||||
if(options.state.activeIndex >= 1 && options.state.activeIndex <= 3){
|
||||
popover.footer.style.display = 'block'
|
||||
}else{
|
||||
popover.footer.style.display = 'none'
|
||||
}
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
const openGuide = () =>{
|
||||
// driverObj__.drive();
|
||||
driverObj__.moveNext();
|
||||
driverObj__.movePrevious();
|
||||
}
|
||||
|
||||
export{
|
||||
openGuide,
|
||||
driverObj__,
|
||||
}
|
||||
@@ -14,7 +14,7 @@
|
||||
class="home_null_icon"
|
||||
src="@/assets/images/homePage/null_img.png"
|
||||
/> -->
|
||||
<div class="new_collection_button" @click="startNewCollection()">
|
||||
<div id="Guide_1_1" class="new_collection_button" @click="startNewCollection()">
|
||||
{{ $t('HomeView.GetStarted') }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -205,7 +205,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref, computed ,inject,provide} from "vue";
|
||||
import { defineComponent, h, ref, computed ,inject,provide,nextTick} from "vue";
|
||||
import HeaderComponent from "@/component/HomePage/Header.vue";
|
||||
import CollectionModal from "@/component/HomePage/collectionModal.vue";
|
||||
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
|
||||
@@ -217,6 +217,7 @@ import { message } from "ant-design-vue";
|
||||
import { useStore } from "vuex";
|
||||
import { Https } from "@/tool/https";
|
||||
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import draggable from 'vuedraggable'
|
||||
import JSZip from "jszip";
|
||||
@@ -330,6 +331,10 @@ export default defineComponent({
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// if(JSON.parse( getCookie('isFirst') as any)){
|
||||
openGuide()
|
||||
// }
|
||||
|
||||
let userInfo:any = getCookie("userInfo")
|
||||
this.userInfo = JSON.parse(userInfo);
|
||||
this.store.dispatch('get_clothingType')
|
||||
@@ -432,6 +437,9 @@ export default defineComponent({
|
||||
let collectionModal: any = this.$refs.collectionModal;
|
||||
this.store.commit("clearAllData");
|
||||
collectionModal.changeCollectionModal(true);
|
||||
nextTick().then(()=>{
|
||||
driverObj__.moveNext();
|
||||
})
|
||||
},
|
||||
|
||||
//recollection
|
||||
|
||||
@@ -30,19 +30,8 @@
|
||||
<div class="library_body_right">
|
||||
<div class="library_right_header">
|
||||
<div class="library_header_left">
|
||||
<div class="header_operate_item pointer" :class="{operate_select:uploadGenerate == 'Upload'}" @click="uploadGenerateOpen('Upload')">
|
||||
<a-upload
|
||||
v-show="uploadGenerate == 'Upload'"
|
||||
:before-upload="beforeUpload"
|
||||
:customRequest="customRequest "
|
||||
:multiple="selectCode != 'Models'"
|
||||
:maxCount="15"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="fileUploadChange"
|
||||
>
|
||||
<div>{{ $t('LibraryPage.Upload') }}</div>
|
||||
</a-upload>
|
||||
<div v-show="uploadGenerate != 'Upload'">{{ $t('LibraryPage.Upload') }}</div>
|
||||
<div class="header_operate_item pointer" :class="{operate_select:uploadGenerate == 'Upload'}" @click="uploadGenerateOpen('Upload')">
|
||||
<div>{{ $t('LibraryPage.Organize') }}</div>
|
||||
</div>
|
||||
<div v-show="selectCode != 'Models'" class='header_operate_item pointer' :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">{{ $t('LibraryPage.Generate') }}</div>
|
||||
</div>
|
||||
@@ -84,6 +73,19 @@
|
||||
<div class="content_body_header">
|
||||
<div class="content_body_header_left">
|
||||
<div class="content_body_header_right">
|
||||
<div :class="['header_operate_item' , 'fontSize','active']">
|
||||
<a-upload
|
||||
v-show="uploadGenerate == 'Upload'"
|
||||
:before-upload="beforeUpload"
|
||||
:customRequest="customRequest "
|
||||
:multiple="selectCode != 'Models'"
|
||||
:maxCount="15"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="fileUploadChange"
|
||||
>
|
||||
<div>{{ $t('LibraryPage.Upload') }}</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="deleteBatchPic()">{{ $t('LibraryPage.Delete') }}</div>
|
||||
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal('','batch')">{{ $t('LibraryPage.Rename') }}</div>
|
||||
</div>
|
||||
@@ -117,17 +119,18 @@
|
||||
:max-collapse-tags=3
|
||||
:props="props"
|
||||
:collapse-tags-tooltip="true"
|
||||
clearable
|
||||
ref="cascader"
|
||||
popper-class="libraryPageCascader"
|
||||
@visible-change="dropdownVisibleChange"
|
||||
>
|
||||
</el-cascader>
|
||||
</div>
|
||||
|
||||
<div class="intersection">
|
||||
<div :title="$t('LibraryPage.unionSet')" @click="()=>intersection = 1" v-show="intersection == 0" :class="['icon', 'iconfont','icon-bingji',]"></div>
|
||||
<div :title="$t('LibraryPage.intersection')" @click="()=>intersection = 0" v-show="intersection == 1" :class="['icon', 'iconfont','icon-bingji1',]"></div>
|
||||
</div>
|
||||
<!-- <div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div> -->
|
||||
<div class="generage_btn search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="imgList.length" :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()">
|
||||
@@ -325,7 +328,6 @@
|
||||
:max-collapse-tags=6
|
||||
:props="props"
|
||||
:collapse-tags-tooltip="true"
|
||||
clearable
|
||||
>
|
||||
</el-cascader>
|
||||
<div class="rename_button_list">
|
||||
@@ -458,7 +460,7 @@ export default defineComponent({
|
||||
value:'id',
|
||||
label:'classificationName',
|
||||
}
|
||||
|
||||
let intersection = ref(1)
|
||||
let isTest = ref()
|
||||
|
||||
|
||||
@@ -496,6 +498,7 @@ export default defineComponent({
|
||||
options,
|
||||
t,
|
||||
props,
|
||||
intersection,
|
||||
isTest,
|
||||
}
|
||||
},
|
||||
@@ -981,6 +984,7 @@ export default defineComponent({
|
||||
modelSex:this.sex?this.sex:'',
|
||||
pictureName:this.searchPictureName,
|
||||
size:this.pageSize,
|
||||
intersection:this.intersection,
|
||||
}
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
||||
@@ -1341,7 +1345,7 @@ export default defineComponent({
|
||||
color: #C2C2C2;
|
||||
font-size: 1.6rem;
|
||||
.ant-upload{
|
||||
font-size: 1.6rem;
|
||||
// font-size: 1.6rem;
|
||||
// font-weight: 900;
|
||||
}
|
||||
.ant-upload-list-text{
|
||||
@@ -1395,7 +1399,8 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.search_cascader{
|
||||
width: 60%;
|
||||
// width: 53%;
|
||||
width: 38rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
@@ -1416,6 +1421,10 @@ export default defineComponent({
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.intersection{
|
||||
margin-left: 3rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1547,6 +1556,7 @@ export default defineComponent({
|
||||
cursor: no-drop;
|
||||
}
|
||||
}
|
||||
|
||||
.generage_btn{
|
||||
margin: 0 3rem;
|
||||
}
|
||||
|
||||
154
src/views/versions1Guide.vue
Normal file
154
src/views/versions1Guide.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="move_page">
|
||||
<div class="move_click">
|
||||
<div class="move_click_dian" v-for="i in moveDian" :key="i" :style="{'background':i}" @mousedown="AddDian(i)"></div>
|
||||
</div>
|
||||
<div class="img_block" ref="imgbox" @mousemove="startMove($event)">
|
||||
<img ref="img" src="https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF" />
|
||||
<!-- <div class="img_mark"></div> -->
|
||||
<div class="img_click_dian" v-for="item in imgDian" :key="item" :style="{'background':item.color,left:item.left+'px', top:item.top+'px'}" @mousedown="getMouseDown($event,item)" @mousemove="startMove($event)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent,h,ref} from "vue";
|
||||
export default defineComponent({
|
||||
data(){
|
||||
return{
|
||||
moveDian:['red','yellow'],
|
||||
imgDian:[],
|
||||
intObj:null,
|
||||
startDian:false,
|
||||
currentSign:{},
|
||||
imgBox:{},
|
||||
moveOriginal:{posX: 0, posY: 0}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.imgBox = {
|
||||
left : this.$refs.imgbox.offsetLeft,
|
||||
top:this.$refs.imgbox.offsetTop,
|
||||
scrollTop:this.$refs.scrollTop || 0,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
AddDian(color){
|
||||
this.startDian = true
|
||||
this.intObj = {
|
||||
color:color
|
||||
}
|
||||
},
|
||||
|
||||
startMove(event){
|
||||
let scrollTop = this.$refs.imgbox.scrollTop;
|
||||
if(this.intObj){
|
||||
this.currentSign.color = this.intObj.color
|
||||
this.currentSign.left = event.clientX - this.imgBox.left
|
||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
|
||||
this.imgDian.push(this.currentSign)
|
||||
this.intObj = null
|
||||
}else{
|
||||
if(this.startDian){
|
||||
this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
|
||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
|
||||
document.addEventListener('mouseup', this.getMouseOver);
|
||||
this.$forceUpdate()
|
||||
this.setBoundarySign()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 在边界上的签名域处理
|
||||
setBoundarySign() {
|
||||
let height = this.$refs.imgbox.offsetHeight + this.$refs.imgbox.scrollTop;
|
||||
// 2 为签名域的边框
|
||||
let maxPosHeight = height - 30
|
||||
// console.log(height,maxPosHeight,this.currentSign.pos_params.height)
|
||||
let maxPosWidth = this.$refs.imgbox.clientWidth - 30 //+ this.signBox.paddLeft;
|
||||
if (this.currentSign.top <= 0) {
|
||||
this.currentSign.top = 0
|
||||
} else if (this.currentSign.top >= maxPosHeight ) {
|
||||
this.currentSign.top = maxPosHeight;
|
||||
}
|
||||
if (this.currentSign.left <= 0) {
|
||||
this.currentSign.left = 0
|
||||
} else if (this.currentSign.left >= maxPosWidth) {
|
||||
this.currentSign.left = maxPosWidth;
|
||||
}
|
||||
},
|
||||
|
||||
getMouseDown(event,item){
|
||||
this.currentSign = item
|
||||
// 计算出鼠标在签名域上的偏移
|
||||
this.moveOriginal.posX = event.offsetX
|
||||
// this.moveOriginal.posY = mousedownParam.event.clientY - this.currentSign.pos_params.top - this.signBox.boxTop;
|
||||
this.moveOriginal.posY = event.offsetY // 1为边框
|
||||
this.startDian = true
|
||||
},
|
||||
|
||||
getMouseOver(){
|
||||
this.startDian = false
|
||||
this.currentSign = {}
|
||||
document.removeEventListener('mouseup', this.getMouseOver);
|
||||
document.removeEventListener('touchend', this.getMouseOver);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.move_page{
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.move_click{
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.move_click_dian{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 60px;
|
||||
cursor: pointer;
|
||||
user-select:none; /* CSS3属性 */
|
||||
}
|
||||
.img_block{
|
||||
position: relative;
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
overflow-y: auto;
|
||||
background: green;
|
||||
}
|
||||
.img_mark{
|
||||
width: 1200px;
|
||||
height: 600px;
|
||||
background: #ccc;
|
||||
/* width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; */
|
||||
}
|
||||
img{
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
width: 700px;
|
||||
}
|
||||
.img_click_dian{
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
-moz-user-select:none; /* Firefox私有属性 */
|
||||
-webkit-user-select:none; /* WebKit内核私有属性 */
|
||||
-ms-user-select:none; /* IE私有属性(IE10及以后) */
|
||||
-khtml-user-select:none; /* KHTML内核私有属性 */
|
||||
-o-user-select:none; /* Opera私有属性 */
|
||||
user-select:none; /* CSS3属性 */
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user