注释渐变色功能和作品广场
This commit is contained in:
X1627315083
371
src/component/WorksPage/publish.vue
Normal file
371
src/component/WorksPage/publish.vue
Normal file
@@ -0,0 +1,371 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="publish_modal"
|
||||
v-model:visible="publish"
|
||||
:footer="null"
|
||||
width="50%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="publishMask"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<div class="publish_btn">
|
||||
<div class="collection_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="publish_content">
|
||||
<div class="modal_title_text">
|
||||
<div>Publish</div>
|
||||
<div class="modal_title_text_intro"></div>
|
||||
</div>
|
||||
<div class="publish_content_bottom">
|
||||
<div class="publidh_left">
|
||||
<div class="publidh_content_item">
|
||||
<div class="publidh_content_item_title">Cover Picture</div>
|
||||
<div class="publish_content_shrink publish_content_item">
|
||||
<img v-lazy="'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'" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="publidh_left_thubnai publidh_content_item">
|
||||
<div class="publidh_content_item_title">Select Cover Picture</div>
|
||||
<div class="publidh_left_thubnail_list publish_content_item">
|
||||
<img v-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" alt="">
|
||||
<img v-lazy="'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'" alt="">
|
||||
<img v-lazy="'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'" alt="">
|
||||
<img v-lazy="'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'" alt="">
|
||||
<img v-lazy="'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'" alt="">
|
||||
<img v-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" alt="">
|
||||
<img v-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="publidh_right">
|
||||
<div class="publidh_right_name publidh_content_item">
|
||||
<div class="publidh_content_item_title">Name</div>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="publidh_right_name publidh_content_item">
|
||||
<div class="publidh_content_item_title">Description</div>
|
||||
<textarea ref="textarea"></textarea>
|
||||
</div>
|
||||
<!-- <div class="publidh_right_name publidh_content_item">
|
||||
<div class="publidh_content_item_title">Thumbnail preview</div>
|
||||
<input type="text">
|
||||
</div> -->
|
||||
<div class="publidh_right_name publidh_content_item">
|
||||
<div class="publidh_content_item_intro">
|
||||
<span class="icon iconfont icon-zhuyi"></span>This will publish your work to the square for all users to see.
|
||||
</div>
|
||||
</div>
|
||||
<div class="publidh_right_btn">
|
||||
<div class="started_btn" @click="setClose">Close</div>
|
||||
<div class="started_btn">Save as draft</div>
|
||||
<div class="started_btn" @click="setPublish">Publish</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
|
||||
// import { Https } from "@/tool/https";
|
||||
// import { getCookie } from "@/tool/cookie";
|
||||
// import domTurnImg from '@/tool/domTurnImg'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { downloadIamge } from "@/tool/util";
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
let publish: any = ref(false);//弹窗
|
||||
let publishMask:any = ref(false)//弹窗遮罩
|
||||
let publishDate:any = reactive({
|
||||
publishName:'123123',
|
||||
loadingShow:false,
|
||||
publishMarginTop:0,
|
||||
publishList:[],
|
||||
publishIndex:0,//当前图片索引
|
||||
})
|
||||
// let textarea: any = ref(null)
|
||||
// let setCopy = ()=>{
|
||||
// textarea.value.select()
|
||||
// document.execCommand("copy");
|
||||
// }
|
||||
let init = ()=>{
|
||||
console.log(213123);
|
||||
publish.value = true
|
||||
// publishDate.publishList = list
|
||||
// publishDate.publishIndex = index
|
||||
// let publishList = this.store.state.UploadFilesModule.moodboard
|
||||
}
|
||||
// let download = ()=>{
|
||||
// downloadIamge(publishDate.publishList[publishDate.publishIndex].imgUrl)
|
||||
// }
|
||||
// let setScaleImageIndex = (index:any)=>{
|
||||
// publishDate.publishIndex = index
|
||||
// }
|
||||
// let LikeFile = (item:any,str:string)=>{
|
||||
// const currentInstance = getCurrentInstance();
|
||||
// let parent:any = currentInstance?.parent
|
||||
// console.log(parent);
|
||||
|
||||
// parent.likeFile(item,str)
|
||||
// }
|
||||
|
||||
// LikeFile(item:any,str:string){
|
||||
// let parent:any = this.$parent
|
||||
// parent.likeFile(item,str)
|
||||
// },
|
||||
let confrimRename = ()=>{
|
||||
|
||||
}
|
||||
let cleardate = ()=>{
|
||||
publish.value = false
|
||||
}
|
||||
let cancelDsign = ()=>{
|
||||
Modal.confirm({
|
||||
title: 'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
cleardate()
|
||||
}
|
||||
});
|
||||
}
|
||||
let setPublish= ()=>{
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: 'This will publish your work to the square for all users to see. Please confirm whether to publish?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
publish,
|
||||
publishMask,
|
||||
...toRefs(publishDate),
|
||||
// textarea,
|
||||
// setCopy,
|
||||
init,
|
||||
// download,
|
||||
// setScaleImageIndex,
|
||||
// LikeFile,
|
||||
confrimRename,
|
||||
cancelDsign,
|
||||
setPublish,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// moodTemplateId: "", //模板id
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
// init(list:any,index:any,dialogueIndex:any){
|
||||
|
||||
// },
|
||||
// cancelDsign(){
|
||||
// this.publish = false
|
||||
// // this.publishList = []
|
||||
// // this.publishIndex = 0
|
||||
// },
|
||||
// download(){
|
||||
// // downloadIamge(this.publishList[this.publishIndex].imgUrl)
|
||||
// },
|
||||
// setScaleImageIndex(index:any){
|
||||
// // this.publishIndex = index
|
||||
// // console.log(this.publishIndex);
|
||||
|
||||
// },
|
||||
// LikeFile(item:any,str:string){
|
||||
// let parent:any = this.$parent
|
||||
// parent.likeFile(item,str)
|
||||
// },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.publish_modal {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
.ant-modal-body {
|
||||
padding: 0;
|
||||
// height: calc(65vh - 6.4rem);
|
||||
height: calc(65rem*1.2);
|
||||
// background-color: #181818;
|
||||
}
|
||||
.ant-modal-btn{
|
||||
|
||||
}
|
||||
.ant-modal-body{
|
||||
padding: calc(4rem*1.2) calc(5rem*1.2);
|
||||
|
||||
}
|
||||
.publish_page{
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
&.publish_page::-webkit-scrollbar{display: none;}
|
||||
}
|
||||
|
||||
.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
|
||||
font-size: 2rem;
|
||||
}
|
||||
.publish_btn {
|
||||
.collection_closeIcon{
|
||||
position: absolute;
|
||||
top: calc(2rem*1.2);
|
||||
right: calc(2rem*1.2);
|
||||
cursor: pointer;
|
||||
width: calc(4rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.left{
|
||||
left: calc(2rem*1.2);
|
||||
}
|
||||
.fi-rr-cross-small::before{
|
||||
padding: calc(.2rem*1.2);
|
||||
border-radius: 5px;
|
||||
border: solid 2px rgba(0, 0, 0, 0.22);
|
||||
transition: .3s all;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
&.collection_closeIcon:hover .fi-rr-cross-small::before{
|
||||
border: solid 2px rgba(0, 0, 0, 5);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
.fi-rr-down-to-line{
|
||||
transition: .3s all;
|
||||
color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
.fi-rr-down-to-line:hover{
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.publish_content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.publish_content_bottom{
|
||||
--border-color: #c4c4c4;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
.publidh_left,.publidh_right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.publidh_content_item{
|
||||
margin-bottom: 2rem;
|
||||
.publidh_content_item_title{
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.publidh_content_item_intro{
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
input{
|
||||
width: 100%;
|
||||
border-radius: 1rem;
|
||||
height: 4rem;
|
||||
padding-left: 2rem;
|
||||
font-size: 2rem;
|
||||
border: .2rem solid var(--border-color);
|
||||
}
|
||||
textarea{
|
||||
flex: 1;
|
||||
margin-top: var(--padding);
|
||||
width: 100% !important;
|
||||
height: 10rem !important;
|
||||
border-radius: 1rem;
|
||||
border: .2rem solid var(--border-color);
|
||||
font-size: 1.8rem;
|
||||
padding: 1rem;
|
||||
color: #575757;
|
||||
outline: none; /* 清除默认焦点样式 */
|
||||
}
|
||||
textarea:focus{
|
||||
border: .2rem solid var(--border-color);
|
||||
outline: none; /* 清除默认焦点样式 */
|
||||
}
|
||||
}
|
||||
.publidh_content_item:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.publidh_left{
|
||||
width: 45%;
|
||||
|
||||
.publish_content_shrink{
|
||||
width: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
max-height: 30rem;
|
||||
}
|
||||
}
|
||||
.publidh_left_thubnai{
|
||||
flex: 1;
|
||||
.publidh_left_thubnail_list{
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
height: 24rem;
|
||||
img{
|
||||
height: 100%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
img:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.publidh_right{
|
||||
width: 45%;
|
||||
.publidh_right_btn{
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
>div:nth-child(1){
|
||||
margin-right: auto;
|
||||
}
|
||||
>div:nth-child(2){
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user