-
-->
+
+
-
+
+
@@ -103,7 +104,7 @@ import DesignPrintOperation from './DesignPrintOperation.vue';
import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
import { message,Upload} from 'ant-design-vue';
import { openGuide,driverObj__ } from "@/tool/guide";
-import {isMoible} from '@/tool/util'
+import {isMoible,setGradual} from '@/tool/util'
import { useI18n } from 'vue-i18n';
export default defineComponent({
@@ -128,8 +129,9 @@ export default defineComponent({
//颜色
// let colorList = ref([{}])
- let colorList = ref([{},{},{},{},{},{},{},{},{}])
-
+ // let colorList = ref([{},{},{},{},{},{},{},{},{}])
+ let colorList = inject('colorList')//父组件传过来的数据
+ let selectIndex = inject('selectIndex')//父组件传过来的数据
//加载中
let loadingShow = ref(false)
@@ -148,6 +150,7 @@ export default defineComponent({
overallSingle,
systemDesignerPercentage,
colorList,
+ selectIndex,
loadingShow,
t,
}
@@ -156,11 +159,29 @@ export default defineComponent({
return{
//颜色
- selectIndex:0,//选中的文件索引
getRGBA:{},
selectColor:{},
}
},
+ computed:{
+ setGradient(){
+ return (gradient)=>{
+ let gradientStr = ''
+ gradient.gradientList.sort((a, b) => {
+ let aArr = a.left.split('%')[0]
+ let bArr = b.left.split('%')[0]
+ return aArr - bArr;
+ });
+ gradient.gradientList.forEach((item,index)=>{
+ let str = ','
+ if(gradient.gradientList.length == index+1)str = ''
+ gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`
+
+ })
+ return `${gradientStr}`
+ }
+ }
+ },
methods:{
//点击判断
init(num){
@@ -210,24 +231,19 @@ export default defineComponent({
//颜色
selectColorItem(index,color){
- let hex
- let parent = this.$parent
this.selectIndex = index
- this.$parent.selectIndex = index
+ // if(this.$parent.selectColor?.rgba?.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
+ // return
+ // }
if(color.rgba?.r){
- hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b])
+ this.$parent.selectColor = color
}else{
- this.$parent.selectColor = {}
- return
+ this.$parent.selectColor.isClick = {}
}
//判断是否对一个颜色重复点击
- if(this.$parent.selectColor?.rgba?.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
- return
- }
- this.$parent.selectColor = {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex}
- this.$parent.tcxColor = ''
- this.$parent.pantongName = ''
+ // this.$parent.selectColor.tcxColor = ''
+ // this.$parent.selectColor.pantongName = ''
},
setSelectColorItem(color){
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
@@ -304,13 +320,20 @@ export default defineComponent({
data.designSingleItemDTOList[index].printObject.ifSingle = false
data.designSingleItemDTOList[index].printObject.prints = []
}else if(this.type_ == 3){
- if(this.$parent.selectColor?.rgba?.r == undefined){
+ if(this.colorList[this.selectIndex]?.rgba?.r == undefined){
message.info(this.t('DesignDetailEnd.jsContent2'))
return
}
- let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
+ let color = `${this.colorList[this.selectIndex].rgba.r} ${this.colorList[this.selectIndex].rgba.g} ${this.colorList[this.selectIndex].rgba.b}`
data.designSingleItemDTOList[index].color = color
}
+ if(this.colorList[this.selectIndex].gradient){
+ let gradient = this.colorList[this.selectIndex].gradient
+ gradient.colorImg = setGradual(gradient,320,700)
+ data.designSingleItemDTOList[index].gradient = gradient
+ }else{
+ delete data.designSingleItemDTOList[index].gradient
+ }
data.designSingleItemDTOList[index].designType = this.sketchImg.designType?this.sketchImg.designType:this.current.designType
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
this.loadingShow = true
@@ -321,6 +344,11 @@ export default defineComponent({
if(item.type != 'body'){
if(item.id == designItemDetail.clothes[index].id || item.id == this.sketchImg.id_){
designItemDetail.clothes[index].color = item.color
+ if(item.gradient){
+ designItemDetail.clothes[index].gradient = item.gradient
+ }else{
+ delete designItemDetail.clothes[index].gradient
+ }
designItemDetail.clothes[index].designType = item.designType
designItemDetail.clothes[index].layersObject = item.layersObject
designItemDetail.clothes[index].minIOPath = item.minIOPath
diff --git a/src/component/Detail/setDesignItem.vue b/src/component/Detail/setDesignItem.vue
index ac739b56..22646bdd 100644
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -299,7 +299,7 @@ export default defineComponent({
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)
h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
width = w+'px'
- // height = w*num+'px'
+ height = w*num+'px'
}else if(this.direction == 'top'){
num = width/height
this.frontBack.front[this.imgDomIndex].style.top = 'auto'
@@ -309,19 +309,19 @@ export default defineComponent({
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.y)
height = h+'px'
- // width = h*num+'px'
+ width = h*num+'px'
}else if(this.direction == 'bottom'){
num = width/height
h = (e.y - this.frontBack.front[this.imgDomIndex].centers.top)
height = h+'px'
- // width = h*num+'px'
+ width = h*num+'px'
}else if(this.direction == 'left'){
this.frontBack.front[this.imgDomIndex].style.left = 'auto'
this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.x)
width = w+'px'
- // height = w*num+'px'
+ height = w*num+'px'
}
//判断尺寸是否到边
this.frontBack.front[this.imgDomIndex].style.width = width
diff --git a/src/component/HomePage/ColorboardUpload.vue b/src/component/HomePage/ColorboardUpload.vue
index af6a5609..74c97b6f 100644
--- a/src/component/HomePage/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -49,10 +49,15 @@
{{color.tcx}}
{{ color.name }}
-
线性
+ Alignment
@@ -305,31 +310,8 @@ export default defineComponent({
const backIcon = document.createElement('div');
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
- let colorDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-color-wrap')[0]
- // console.log(colorDom);
dropperDom.appendChild(backIcon);
- colorDom.addEventListener('click',()=>{
- // this.colorList[this.selectIndex]
- this.selectColor.rgba = this.selectColor.rgba.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
- this.gradient.selectIndex = 0
- this.gradient.gradientShow = true
- this.colorList[this.selectIndex].rgba = this.selectColor.rgba
- if(!this.colorList[this.selectIndex].gradient ){
- if(this.selectColor.rgba.r){
- this.gradient.gradientList[this.gradient.selectIndex].rgba = {
- r:this.selectColor.rgba.r,
- g:this.selectColor.rgba.g,
- b:this.selectColor.rgba.b,
- a:1,
- }
- }
- this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
- }else{
- this.colorList[this.selectIndex].gradient = ''
- }
- let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
- this.setColorboardList(colorList)
- })
+
backIcon.addEventListener('click', async ()=>{
try {
@@ -370,7 +352,6 @@ export default defineComponent({
},
//选择不同的色块
selectColorItem(index,color){
- console.log(this.colorList);
let hex
if(color?.rgba?.r){
hex = this.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a?color.rgba.a:1])
@@ -612,9 +593,15 @@ export default defineComponent({
colorList.forEach((ele, index) => {
hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])
this.colorList[index].rgba = ele.rgbValue
+ this.colorList[index].gradient = ele.gradient
+ // if(ele.gradient) this.colorList[index].gradient = ele.gradient
// if(ele.gradient) this.colorList[index].gradient = ele.gradient
});
- this.selectColor = {rgba:this.colorList[0].rgba,hex:hex} //顔色选择器默认颜色
+ if(this.colorList[0]?.gradient && this.colorList[0]?.gradient?.selectIndex>-1 && this.colorList[0]?.gradient?.gradientShow){
+ this.selectColor = {rgba:this.colorList[0].gradient.gradientList[0].rgba,hex:hex} //顔色选择器默认颜色
+ }else{
+ this.selectColor = {rgba:this.colorList[0].rgba,hex:hex} //顔色选择器默认颜色
+ }
this.store.commit('setColorboardList',colorList)
},
addGradient(event){
@@ -680,6 +667,29 @@ export default defineComponent({
}
window.addEventListener('mousemove',mousedownGradientAngle)
window.addEventListener('mouseup',mouseupGradientAngle)
+ },
+ setOperate(){
+ // this.colorList[this.selectIndex]
+ this.selectColor.rgba = this.selectColor.rgba.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
+ this.gradient.selectIndex = 0
+ this.gradient.gradientShow = true
+ this.colorList[this.selectIndex].rgba = this.selectColor.rgba
+ if(!this.colorList[this.selectIndex].gradient){
+ if(this.selectColor.rgba.r){
+ this.gradient.gradientList[this.gradient.selectIndex].rgba = {
+ r:this.selectColor.rgba.r,
+ g:this.selectColor.rgba.g,
+ b:this.selectColor.rgba.b,
+ a:1,
+ }
+ }
+ this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+ }else{
+ this.selectColor = {rgba:this.colorList[this.selectIndex].gradient.gradientList[0].rgba}
+ this.colorList[this.selectIndex].gradient = ''
+ }
+ let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
+ this.setColorboardList(colorList)
}
}
})
@@ -858,7 +868,6 @@ export default defineComponent({
}
}
.color_setting_block{
- width: calc(17.5rem*1.2);
margin: auto;
background: linear-gradient(70deg, #eee4f3, #f3f4e6);
@@ -871,14 +880,16 @@ export default defineComponent({
box-shadow:none;
}
.chrome_color{
- width: calc(17.5rem*1.2);
+ // width: calc(17.5rem*1.2);
+ width: 24rem;
// height: 16.5rem;
overflow: hidden;
.vc-chrome-saturation-wrap{
height: 100%;
- width: calc(16rem*1.2);
- height: calc(16rem*1.2);
+ // width: calc(16rem*1.2);
+ width: 100%;
+ height: calc(14rem*1.2);
max-height: calc(17rem*1.2);
max-width: calc(17rem*1.2);
margin: calc(.7rem*1.2) auto;
@@ -1059,9 +1070,11 @@ export default defineComponent({
}
}
-
+ .color_setting_operateSingle{
+ text-align: center;
+ margin: 1rem 0;
+ }
.color_setting_operate{
- margin-top: 2rem;
*{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue
index e56481cf..e04ba32f 100644
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -138,10 +138,10 @@
![]()
-
+
@@ -933,7 +933,8 @@ export default defineComponent({
height: calc(10rem*1.2);
}
&:hover .delete_like_file_block{
- display: block;
+ // display: block;
+ opacity: 1;
}
}
diff --git a/src/component/HomePage/PrintboardUpload.vue b/src/component/HomePage/PrintboardUpload.vue
index cf5e4498..b8d7bc77 100644
--- a/src/component/HomePage/PrintboardUpload.vue
+++ b/src/component/HomePage/PrintboardUpload.vue
@@ -136,7 +136,7 @@
:class="[driver__.driver?'hideEvents':'']"
>
-
+
diff --git a/src/component/HomePage/RobotAssist.vue b/src/component/HomePage/RobotAssist.vue
index 706f0615..6a52627f 100644
--- a/src/component/HomePage/RobotAssist.vue
+++ b/src/component/HomePage/RobotAssist.vue
@@ -25,7 +25,7 @@
class="delete_like_file_block"
>
-
+
@@ -469,8 +469,14 @@ export default defineComponent({
overflow: hidden;
margin: 0 5%;
margin-bottom: 5%;
+ .delete_like_file_block{
+ cursor: pointer;
+ width: 2rem;
+ height: 2rem;
+ }
&:hover .delete_like_file_block{
- display: block;
+ // display: block;
+ opacity: 1;
}
}
img{
diff --git a/src/component/HomePage/SketchboardUpload.vue b/src/component/HomePage/SketchboardUpload.vue
index 9cd5aca1..37872089 100644
--- a/src/component/HomePage/SketchboardUpload.vue
+++ b/src/component/HomePage/SketchboardUpload.vue
@@ -166,7 +166,7 @@
class="delete_like_file_block left1"
>
-
+
diff --git a/src/component/HomePage/collectionModal.vue b/src/component/HomePage/collectionModal.vue
index 265e277a..54245da7 100644
--- a/src/component/HomePage/collectionModal.vue
+++ b/src/component/HomePage/collectionModal.vue
@@ -73,6 +73,7 @@ import { Https } from "@/tool/https";
import {useStore} from 'vuex'
import { openGuide,driverObj__ } from "@/tool/guide";
import GO from "@/tool/GO";
+import {setGradual} from '@/tool/util'
import { useI18n } from 'vue-i18n'
// import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
export default defineComponent({
@@ -96,7 +97,7 @@ export default defineComponent({
let position:any = computed(()=>{
return store.state.Workspace.workspacePosition
})
- let showCollectionModal=ref(false)
+ let showCollectionModal:any=ref(false)
let collectionStep=ref(1)
provide('driver__',driver__)
let isShowMark = ref(false)
@@ -150,6 +151,12 @@ export default defineComponent({
if(this.collectionStep == 3){
if(colorBoards.length >= 1){
+ colorBoards.forEach((colorItem:any) => {
+ if(colorItem.gradient){
+ colorItem.gradient.colorImg = setGradual(colorItem.gradient,320,700)
+ }
+ });
+ this.store.commit('setColorboardList',colorBoards)
}else{
message.info(this.$t('collectionModal.jsContent3'))
return
@@ -312,7 +319,6 @@ export default defineComponent({
.catch((res) => {
this.isShowMark = false
});
-
}
}
diff --git a/src/component/HomePage/layoutMobile.vue b/src/component/HomePage/layoutMobile.vue
index 9f8d63b6..c1a96ee5 100644
--- a/src/component/HomePage/layoutMobile.vue
+++ b/src/component/HomePage/layoutMobile.vue
@@ -28,7 +28,7 @@
- ![]()
+ ![]()
-
@@ -317,21 +317,22 @@ export default defineComponent({
},
//操作旋转
rotote:{
- mounted(el){
+ mounted(el,compile){
let mouse = true;
let angle :any = 0
let num:any
let x = 0
let y = 0
let elParent = el.parentNode.parentNode
- if(document.defaultView){
- let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
- num = Number(transform[3])
- }
+
// 添加鼠标按下事件监听器
el.addEventListener('touchstart', (e:any) => {
e.stopPropagation()
mouse = true;
+ if(document.defaultView){
+ let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
+ num = Number(transform[3])
+ }
// let eX = (e.pageX - el.offsetLeft) + el.offsetLeft
// let eY = elParent.offsetTop + el.offsetTop
var info = el.getBoundingClientRect();
@@ -345,7 +346,14 @@ export default defineComponent({
let x:any = e.targetTouches[0].clientX - X
let y:any = Y - e.targetTouches[0].clientY
angle = Math.atan2(x,y)*(180 / Math.PI)
- elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
+ let instance:any = compile.instance
+ instance.layoutList.forEach((item:any) => {
+ if(item.setPitch){
+ angle = angle.toFixed(2)
+ item.angle = angle
+ }
+ });
+ // elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
}
});
@@ -357,40 +365,6 @@ export default defineComponent({
// y = e.pageY
});
});
- //缩放
- let timeSwitch = true
- el.parentNode.addEventListener('mousemove', (e:any) => {
- el.parentNode.addEventListener('mousewheel',(e:any) => {
- if(timeSwitch){
- timeSwitch = false
- if((e as WheelEvent).deltaY > 0){
- if(num <= 1){
- num -= 0.05
- }else{
- num -= 0.1
- }
- }else{
- //放大
- if(num <= 1){
- num += 0.05
- }else{
- num += 0.1
- }
- }
- if(num >= 3){
- num = 3
- }else if (num < .2){
- num = .2
- }
- setTimeout(() => {
- timeSwitch = true
- }, 100);
- elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
- }
-
-
- });
- });
}
},
@@ -600,7 +574,11 @@ export default defineComponent({
v.setPitch = false
})
this.layoutList = parentList
-
+ this.layoutList[0].setPitch = true
+ this.layoutList[0].zoom = this.layoutList[0].zoom?this.layoutList[0].zoom:1
+ this.moodItemScale = this.layoutList[0].zoom*100
+ this.moodIndex = 0
+
this.moodbList = this.moodb[parentList.length-1]
this.moodbClassName = this.moodb_className
},
diff --git a/src/component/HomePage/scaleImage.vue b/src/component/HomePage/scaleImage.vue
index 9e2b2544..57377a6c 100644
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -23,7 +23,7 @@
-
+
diff --git a/src/component/WorksPage/newScaleImage.vue b/src/component/WorksPage/newScaleImage.vue
index 3c39ed82..bb7df1aa 100644
--- a/src/component/WorksPage/newScaleImage.vue
+++ b/src/component/WorksPage/newScaleImage.vue
@@ -12,34 +12,48 @@
:destroyOnClose="true"
>
-
+
-
+
-
+
![]()
- ![]()
- ![]()
![]()
-
-
+
+
+
+
-
-
类型：collection/generate
-
+
+
+
+
+
+ Finished Products
+
+ ![]()
+ ![]()
+ ![]()
+
+ 二创
+
+
-
- 模型：123123
@@ -58,37 +72,44 @@
-
-
- comment
-
-
-
-
+
-
+
-
@@ -1825,7 +1825,8 @@ export default defineComponent({
}
&:hover .img_item_hover{
- display: block;
+ // display: block;
+ opacity: 1;
}
.img_item_hover{
@@ -1835,7 +1836,8 @@ export default defineComponent({
left: 0;
top:0;
background: rgba(0,0,0,0.2);
- display: none;
+ // display: none;
+ opacity: 0;
.img_operate_content{
position: absolute;
@@ -1856,6 +1858,13 @@ export default defineComponent({
line-height: 3.6rem;
cursor: pointer;
margin-bottom: 0.4rem;
+ .operate_icon,i{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ }
.operate_icon{
font-size: 1.8rem;
color: #fff;
@@ -1866,6 +1875,7 @@ export default defineComponent({
i{
font-size: 1.8rem;
color: #fff;
+
}
}
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index d9c91389..cc0119da 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -248,14 +248,12 @@ export default defineComponent({
let timer:any = 0;
const {locale} = useI18n()
const store = useStore();
-
return{
store,
timer,
locale
}
},
-
data() {
return {
checked:false,
- 
+ ![]()
+ 名字
- 个性签名
+ 个性签名
关注
-
like
- 收藏
+
+
- 这是一套合成图
+ 1111111111111111111111111111
-
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index d24097e5..016861a5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import { createApp,nextTick } from 'vue'
+import { createApp,nextTick, } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
@@ -17,7 +17,7 @@ import { Https } from "@/tool/https";
// import "@/tool/color-thief.js";
// import "@/tool/fabric.brushes.js";
// import "@/tool/fabric.min.js";
-
+const app = createApp(App);
flexible()
import { getCookie, setCookie } from "@/tool/cookie";
router.beforeEach((to, from, next) => {
@@ -67,9 +67,24 @@ async function isMurmur() {
}
+// app.directive('cliAdmin', {
+// mounted(el, binding) {
+// el.style.cursor = 'pointer'
+// },
+// updated (el,binding) {
+// // let value = binding.value
+// // if(value.state){
+// // el.firstElementChild.classList.add(`cliAdmin_${value.type}`)
+// // setTimeout(()=>{
+// // el.firstElementChild.classList.remove(`cliAdmin_${value.type}`)
+// // },500)
+// // }
+// }
+// });
let loadingParam = {
loading: require('./assets/images/homePage/loading.gif'),
attempt: 1
}
-createApp(App).use(store).use(router).use(Antd).use(VueLazyload, loadingParam).use(i18n).mount('#app')
+app.use(store).use(router).use(Antd).use(VueLazyload, loadingParam).use(i18n).mount('#app')
+
diff --git a/src/tool/util.js b/src/tool/util.js
index 8621cec0..d4c3ff6d 100644
--- a/src/tool/util.js
+++ b/src/tool/util.js
@@ -149,11 +149,13 @@ const formatTime = (timestamp, fmt) => {//吧时间戳转为YYYY-MM-DD hh:mm:ss
const isMoible = () => {//判断是否是移动端
let is_mobile = navigator.userAgent.toLowerCase().match(/(ipad|ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
// alert(navigator.userAgent.toLowerCase())
- var isiPad = /iPad/.test(navigator.platform) || (navigator.maxTouchPoints && navigator.maxTouchPoints > 2);
+ var isiPad = (navigator.maxTouchPoints && navigator.maxTouchPoints > 0);
if (is_mobile) {
- return true
- } else {
- return isiPad
+ return true//判断是否在正则内
+ } else if(window.matchMedia("(pointer:fine)").matches){
+ return false//判断是否支持鼠标
+ }else{
+ isiPad//判断触摸点
}
}
@@ -203,6 +205,179 @@ async function murmur(){//生成唯一标识 ，暂时没有使用
});
})
}
+/**
+ * @description: 计算canvas渐变起始坐标
+ * @param {number} canvas width
+ * @param {number} canvas height
+ * @param {number} angle 角度
+ * @return {*}
+ */
+function calculateGradientCoordinate(width,height,angle) {
+ if (angle >= 360) angle = angle - 360;
+ if (angle < 0) angle = angle + 360;
+ angle = Math.round(angle);
+
+ // 当渐变轴垂直于矩形水平边上的两种结果
+ if (angle === 0) {
+ return {
+ x0: Math.round(width / 2),
+ y0: height,
+ x1: Math.round(width / 2),
+ y1: 0,
+ };
+ }
+ if (angle === 180) {
+ return {
+ x0: Math.round(width / 2),
+ y0: 0,
+ x1: Math.round(width / 2),
+ y1: height,
+ };
+ }
+
+ // 当渐变轴垂直于矩形垂直边上的两种结果
+ if (angle === 90) {
+ return {
+ x0: 0,
+ y0: Math.round(height / 2),
+ x1: width,
+ y1: Math.round(height / 2),
+ };
+ }
+ if (angle === 270) {
+ return {
+ x0: width,
+ y0: Math.round(height / 2),
+ x1: 0,
+ y1: Math.round(height / 2),
+ };
+ }
+
+ // 从矩形左下角至右上角的对角线的角度
+ const alpha = Math.round(
+ (Math.asin(width / Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))) *
+ 180) /
+ Math.PI,
+ );
+
+ // 当渐变轴分别于矩形的两条对角线重合情况下的四种结果
+ if (angle === alpha) {
+ return {
+ x0: 0,
+ y0: height,
+ x1: width,
+ y1: 0,
+ };
+ }
+ if (angle === 180 - alpha) {
+ return {
+ x0: 0,
+ y0: 0,
+ x1: width,
+ y1: height,
+ };
+ }
+ if (angle === 180 + alpha) {
+ return {
+ x0: width,
+ y0: 0,
+ x1: 0,
+ y1: height,
+ };
+ }
+ if (angle === 360 - alpha) {
+ return {
+ x0: width,
+ y0: height,
+ x1: 0,
+ y1: 0,
+ };
+ }
+
+ // 以矩形的中点为坐标原点，向上为Y轴正方向，向右为X轴正方向建立直角坐标系
+ let x0 = 0,
+ y0 = 0,
+ x1 = 0,
+ y1 = 0;
+
+ // 当渐变轴与矩形的交点落在水平线上
+ if (
+ angle < alpha || // 处于第一象限
+ (angle > 180 - alpha && angle < 180) || // 处于第二象限
+ (angle > 180 && angle < 180 + alpha) || // 处于第三象限
+ angle > 360 - alpha // 处于第四象限
+ ) {
+ // 将角度乘以（PI/180）即可转换为弧度
+ const radian = (angle * Math.PI) / 180;
+ // 当在第一或第四象限，y是height / 2，否则y是-height / 2
+ const y = angle < alpha || angle > 360 - alpha ? height / 2 : -height / 2;
+ const x = Math.tan(radian) * y;
+ // 当在第一或第二象限，l是width / 2 - x，否则l是-width / 2 - x
+ const l =
+ angle < alpha || (angle > 180 - alpha && angle < 180)
+ ? width / 2 - x
+ : -width / 2 - x;
+ const n = Math.pow(Math.sin(radian), 2) * l;
+ x1 = x + n;
+ y1 = y + n / Math.tan(radian);
+ x0 = -x1;
+ y0 = -y1;
+ }
+
+ // 当渐变轴与矩形的交点落在垂直线上
+ if (
+ (angle > alpha && angle < 90) || // 处于第一象限
+ (angle > 90 && angle < 180 - alpha) || // 处于第二象限
+ (angle > 180 + alpha && angle < 270) || // 处于第三象限
+ (angle > 270 && angle < 360 - alpha) // 处于第四象限
+ ) {
+ // 将角度乘以（PI/180）即可转换为弧度
+ const radian = ((90 - angle) * Math.PI) / 180;
+ // 当在第一或第二象限，x是width / 2，否则x是-width / 2
+ const x =
+ (angle > alpha && angle < 90) || (angle > 90 && angle < 180 - alpha)
+ ? width / 2
+ : -width / 2;
+ const y = Math.tan(radian) * x;
+ // 当在第一或第四象限，l是height / 2 - y，否则l是-height / 2 - y
+ const l =
+ (angle > alpha && angle < 90) || (angle > 270 && angle < 360 - alpha)
+ ? height / 2 - y
+ : -height / 2 - y;
+ const n = Math.pow(Math.sin(radian), 2) * l;
+ x1 = x + n / Math.tan(radian);
+ y1 = y + n;
+ x0 = -x1;
+ y0 = -y1;
+ }
+
+ // 坐标系更改为canvas标准，Y轴向下为正方向
+ x0 = Math.round(x0 + width / 2);
+ y0 = Math.round(height / 2 - y0);
+ x1 = Math.round(x1 + width / 2);
+ y1 = Math.round(height / 2 - y1);
+ return {x0, y0, x1, y1};
+ }
+
+const setGradual = (colorObj,colorWidth,colorHeight)=>{
+ let width = colorWidth || 320
+ let height = colorHeight || 700
+ const canvas = document.createElement("canvas");
+ const ctx = canvas.getContext("2d");
+ canvas.width = width;
+ canvas.height = height;
+ let {x0, y0, x1, y1} = calculateGradientCoordinate(width,height,colorObj.angle)
+ const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+ colorObj.gradientList.forEach(item => {
+ let left = item.left.split('%')[0]/100
+ let rgba = `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`
+ gradient.addColorStop(left, rgba); // 起始颜色
+ });
+ ctx.fillStyle = gradient;
+ ctx.fillRect(0, 0, width, height);
+ const dataURL = canvas.toDataURL('image/jpg');
+ return dataURL
+}
export {
isEmail,
getUploadUrl,
@@ -216,4 +391,5 @@ export {
downloadIamge,
getBrowserInfo,
murmur,
+ setGradual,
}
\ No newline at end of file
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index ab40ea79..8fb4cfb2 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -44,9 +44,9 @@
{{$t('Header.HISTORY')}}
-
+
-
@@ -152,8 +225,6 @@ export default defineComponent({
document.execCommand("copy");
}
let init = (list:any,index:any,dialogueIndex:any)=>{
- console.log(213123);
-
scaleImage.value = true
imgData.scaleImageList = list
imgData.scaleImageIndex = index
@@ -184,7 +255,7 @@ export default defineComponent({
// },
watch(()=>imgData.scaleImageIndex,
(newVal,oldVal)=>{
- let dom:any = document.querySelector('.newScaleImage_content .nav_centent')
+ let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
if(!dom) return
let contentItemHeight = Number(getComputedStyle(dom).getPropertyValue('--snap-size').split('rem')[0]);
imgData.scaleImageMarginTop = `${contentItemHeight*-(newVal) - contentItemHeight/2}rem`
@@ -298,6 +369,7 @@ export default defineComponent({
.newScaleImage_page{
overflow-y: auto;
height: 100%;
+ display: flex;
&.newScaleImage_page::-webkit-scrollbar{display: none;}
}
@@ -360,14 +432,34 @@ export default defineComponent({
font-weight: 600;
color: #000;
}
- .newScaleImage_content{
- width: 100%;
+ .scaleImage_chunk_title_comment{
+ font-size: 1.6rem;
+ font-weight: 600;
+ color: #000;
+ max-height: 8.5rem;
+ overflow: hidden;
+ &.active{
+ max-height: max-content;
+ }
+ }
+ .scaleImage_chunk_title_intro{
+ font-size: 1.6rem;
+ font-weight: 300;
+ color: #535353;
+ // overflow: hidden;
+ // text-overflow: ellipsis;
+ // white-space: nowrap;
+ }
+
+ .newScaleImage_left{
display: flex;
-
+ width: 60%;
+ position: sticky;
+ top: 0;
.newScaleImage_content_right{
- --content-height: 50rem;
+ --content-height: 60rem;
display: flex;
- width: 60%;
+ width: 100%;
flex-wrap: wrap;
justify-content: space-between;
height: var(--content-height);
@@ -375,9 +467,11 @@ export default defineComponent({
overflow: hidden;
.newScaleImage_content_right_img{
height: 100%;
+ width: auto;
width: 60%;
overflow-x: auto;
display: flex;
+ justify-content: center;
img{
width: auto;
max-width: 100%;
@@ -405,7 +499,9 @@ export default defineComponent({
.nav_centent_img{
max-width: calc(var(--snap-size) - 2rem);
height: calc(var(--snap-size) - 2rem);
- object-fit: cover;
+ object-fit: contain;
+ width: auto;
+ background-color: #fff;
object-position: 50%,50%;
border-radius: calc(1rem*1.2);
cursor: pointer;
@@ -433,23 +529,71 @@ export default defineComponent({
}
}
}
- .newScaleImage_content_left{
- width: 40%;
- padding: 0 var(--padding);
+
+ }
+ .newScaleImage_right{
+ width: 40%;
+ padding-left: var(--margin);
+ .newScaleImage_right_content{
display: flex;
flex-direction: column;
+ height: var(--content-height);
.generate_item_title_left{
font-size: 2.4rem;
}
- .newScaleImage_content_left_type{
+ .newScaleImage_right_content_type{
padding: var(--padding) 0;
margin-bottom: var(--margin);
border-bottom: .2rem solid var(--border-color);
}
- .newScaleImage_content_left_generate{
+ .newScaleImage_right_content_collection,.newScaleImage_right_content_generate{
display: flex;
flex-direction: column;
flex: 1;
+ }
+ .newScaleImage_right_content_collection{
+ &.newScaleImage_right_content_collection::-webkit-scrollbar{display: none;}
+ text-align: center;
+ // .content_left_collection_btn{
+ // display: flex;
+ // justify-content: space-around;
+ // }
+ .started_btn{
+ margin-bottom: var(--margin);
+ }
+ .content_left_collection_detail{
+ height: calc(8rem + var(--padding) * 2);
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ .scaleImage_chunk_title{
+ margin-right: 1rem;
+ }
+ }
+ .content_left_collection_content{
+ flex: 1;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ .content_left_collection_content_list{
+ overflow-x: auto;
+ display: flex;
+ flex: 1;
+ width: 100%;
+ align-items: center;
+ margin-top: var(--padding);
+ img{
+ height: 30rem;
+ width: auto;
+ margin-right: var(--margin);
+ }
+ }
+
+ }
+ }
+ .newScaleImage_right_content_generate{
.content_left_generate_item{
overflow: hidden;
@@ -478,7 +622,7 @@ export default defineComponent({
margin-top: var(--padding);
width: 100% !important;
height: 10rem !important;
- border-radius: 4px;
+ border-radius: 4rem;
border: .2rem solid var(--border-color);
font-size: 1.8rem;
padding: 1rem;
@@ -493,26 +637,127 @@ export default defineComponent({
}
}
}
- }
- .newScaleImage_detail{
- display: flex;
- margin-top: var(--margin);
- .newScaleImage_detail_right,.newScaleImage_detail_left{
+ .newScaleImage_right_detail,.newScaleImage_right_comment{
height: auto;
- }
- .newScaleImage_detail_left{
- width: 60%;
- }
- .newScaleImage_detail_right{
- width: 40%;
- padding: 0 var(--padding);
- .detail_right_item{
+ .detail_left_right_item{
margin-bottom: var(--margin);
}
- .detail_right_item:last-child{
+ .detail_left_right_item_click{
+ cursor: pointer;
+ }
+ .detail_left_right_item:last-child{
margin-bottom: 0;
}
-
+ }
+ .newScaleImage_right_comment{
+ display: flex;
+ flex-direction: column;
+ >.scaleImage_chunk_title{
+ text-align: center;
+ }
+ .newScaleImage_right_comment_null,.newScaleImage_right_comment_content{
+ flex: 1;
+ }
+ .newScaleImage_right_comment_null{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ .scaleImage_chunk_title{
+ font-size: 3rem;
+ }
+
+ }
+ .newScaleImage_right_comment_content{
+ max-height: 60rem;
+ overflow-y: auto;
+ .detail_left_content_item{
+ display: flex;
+ margin-bottom: var(--margin);
+ &.detail_left_content_item:last-child{
+ margin-bottom: 0;
+ }
+ .detail_left_content_item_img{
+ border-radius: 50%;
+ overflow: hidden;
+ width: 5rem;
+ height: 5rem;
+ }
+ .detail_left_content_item_content{
+ flex: 1;
+ margin-left: 1rem;
+ width: calc(100% - 6rem - 1rem);
+ >div{
+ margin-top: .4rem;
+ >span{
+ margin-right: .5rem;
+ color: rgba(122, 97, 220);
+ }
+ }
+
+
+ .detail_left_content_item_btn{
+ display: flex;
+ align-items: center;
+ .left_content_item_reply,.left_content_item_thumbs,.left_content_item_unfold{
+ cursor: pointer;
+ }
+ .left_content_item_reply:hover{
+ color: #000;
+ }
+ .left_content_item_thumbs{
+ display: flex;
+ margin-left: 2rem;
+ i{
+ font-size: 2rem;
+ margin-right: 1rem;
+ display: flex;
+ }
+ }
+ .left_content_item_unfold{
+ margin-left: auto;
+ margin-right: 1rem;
+ }
+ }
+ .detail_left_content_item_replyContent{
+ margin-top: var(--padding);
+ display: flex;
+ }
+ }
+ }
+ }
+ .newScaleImage_right_comment_setComment{
+ display: flex;
+ align-items: center;
+ height: 4rem;
+ justify-content: center;
+ margin-top: var(--padding);
+ input,.detail_left_setComment_btn{
+ border-radius: 1rem;
+ }
+ input{
+ padding-left: var(--padding);
+ height: 100%;
+ width: 50%;
+ font-size: 2rem;
+ margin-right: var(--padding);
+ border: .2rem solid var(--border-color);
+ }
+ .detail_left_setComment_btn{
+ width: 4rem;
+ height: 4rem;
+ background: rgba(57, 33, 91);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ i{
+ color: #fff;
+ display: flex;
+ }
+ }
+ }
+ }
+ .newScaleImage_right_detail{
.detail_right_user{
display: flex;
.detail_right_user_head{
@@ -523,6 +768,9 @@ export default defineComponent({
height: 10rem;
object-fit: cover;
}
+ }
+ .detail_right_user_head:hover{
+
}
.detail_right_user_content{
flex: 1;
@@ -546,9 +794,11 @@ export default defineComponent({
}
}
}
- .detail_right_operation{
- display: flex;
- justify-content: space-evenly;
+ .detail_right_work_detail{
+ .scaleImage_chunk_title_intro{
+ margin-top: calc(var(--padding) / 2);
+ height: auto
+ }
}
.detail_right_look_operation{
display: flex;
@@ -566,6 +816,19 @@ export default defineComponent({
}
}
}
+ .detail_right_date{
+ display: flex;
+ justify-content: space-between;
+ .detail_right_date_setUp,.detail_right_date_upData{
+ div{
+ font-size: 2rem;
+ font-weight: 600;
+ }
+ span{
+ font-size: 1.8rem;
+ }
+ }
+ }
.detail_right_auther{
.detail_right_auther_img{
width: 100%;
@@ -573,6 +836,7 @@ export default defineComponent({
margin-top: var(--padding);
--auther_wh: 8rem;
.detail_right_auther_img_item{
+ text-align: center;
width: var(--auther_wh);
height: var(--auther_wh);
flex-shrink: 1;
diff --git a/src/component/WorksPage/publish.vue b/src/component/WorksPage/publish.vue
new file mode 100644
index 00000000..90fcef17
--- /dev/null
+++ b/src/component/WorksPage/publish.vue
@@ -0,0 +1,371 @@
+
+
+
+
+
+
+
+
+
+
+ Publish
+
+
+
+
+
+
+
+
+ Cover Picture
+
+ ![]()
+
+
+
+ Select Cover Picture
+
+ ![]()
+ ![]()
+ ![]()
+ ![]()
+ ![]()
+ ![]()
+ ![]()
+
+
+
+
+
+ Name
+
+
+
+
+ Description
+
+
+
+
+ This will publish your work to the square for all users to see.
+
+
+
+ Close
+ Save as draft
+ Publish
+
diff --git a/src/views/HomeView/HomeView.vue b/src/views/HomeView/HomeView.vue
index 63875bd1..b25e43a2 100644
--- a/src/views/HomeView/HomeView.vue
+++ b/src/views/HomeView/HomeView.vue
@@ -806,6 +806,7 @@ export default defineComponent({
id: v.id,
name: v.name,
tcx: v.tcx,
+ gradient:v.gradient,
rgbValue: "",
};
data.rgbValue = `${v.rgbValue.r} ${v.rgbValue.g} ${v.rgbValue.b}`;
@@ -994,6 +995,11 @@ export default defineComponent({
a: 1,
},
};
+ if(v.gradient){
+ newData.gradient = v.gradient;
+ }else{
+ delete newData.gradient;
+ }
return newData;
});
return colorList;
diff --git a/src/views/HomeView/Works.vue b/src/views/HomeView/Works.vue
index 2688e8cf..76c2f146 100644
--- a/src/views/HomeView/Works.vue
+++ b/src/views/HomeView/Works.vue
@@ -7,8 +7,8 @@
{{ item.name }}
-
-
+
@@ -78,7 +80,7 @@
+
![]()
@@ -170,7 +179,7 @@ export default defineComponent({
likeNum:'123',
like: false,
},{
- imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+ imgUrl: 'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542',
name:'aaa',
lookNum:'213',
likeNum:'123',
@@ -278,15 +287,15 @@ export default defineComponent({
.page_content_item{
display: flex;
flex-direction: column;
- margin-right: 3rem;
- margin-bottom: 3rem;
+ margin-right: 4rem;
+ margin-bottom: 4rem;
}
.page_content_item_text,.page_content_item_img{
display: flex;
}
.page_content_item_img{
- width: 25rem;
- height: 25rem;
+ width: 30rem;
+ height: 30rem;
overflow: hidden;
justify-content: center;
border-radius: 2rem;
@@ -328,11 +337,18 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: flex-end;
- >svg{
- width: 2rem;
- height: 2rem;
- margin-right: .5rem;
- margin-left: 1rem;
+ >div{
+ display: flex;
+ align-items: center;
+ font-size: 2rem;
+ margin-right: 1rem;
+ i{
+ display: flex;
+ font-size: 2rem;
+ }
+ span{
+ margin-left: calc(var(--padding) / 2);
+ }
}
}
}
diff --git a/src/views/HomeView/history.vue b/src/views/HomeView/history.vue
index 805d4933..ac8876d6 100644
--- a/src/views/HomeView/history.vue
+++ b/src/views/HomeView/history.vue
@@ -69,6 +69,8 @@
@@ -20,19 +20,28 @@
{{item.name}}
-
-
- {{ item.likeNum }}
-
-
-
- {{ item.lookNum }}
-
+
+
+ {{ item.likeNum }}
+
+
+
+
+ 321
+
+
+
+ {{ item.lookNum }}
+
+
{{ $t('HistoryPage.Detail') }}
{{ $t('LibraryPage.Rename') }}
{{ $t('HistoryPage.Retrieve') }}
+
{{ $t('HistoryPage.Delete') }}
-
+