aida_front/src/component/HomePage/index/model/cloudUploading/index.vue

<template>
	<div class="uploading">
		<div class="title">
			<div class="list">
				<div
					class="titleItem active"
				>
					<span class="detailText">All</span>
				</div>
			</div>
			<div class="createCloud">
				<div class="gallery_btn" @click="createClound">Create cloudUploading</div>
			</div>
		</div>
		<div class="contentList">
			<div class="title">
				<div class="titleItem" v-for="item in cloudTiltleList" :key="item.value">
					{{ item.name }}
				</div>
			</div>
			<div class="content"></div>
		</div>
		<!-- <createCloud ref="createCloud"></createCloud> -->
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import createCloud from "./createCloud.vue";
export default defineComponent({
	components:{
		createCloud,
	},
	props:{
		workflowType:{
		    type:String,
			default:'' as any,
			required:true	
		}
	},
	emits:[],
	setup(props,{emit}) {
		const store = useStore();
		const data = reactive({
			pageType:'list',
			generateList:{
				seriesDesign:[
					{
						name:'1',
						value:100,
					}
				],
				singleProductDesign:[
					{
						name:'1',
						value:100,
					}
				],
				printDesign:[
					{
						name:'1',
						value:100,
					}
				],
				productDrawingDesign:[
					{
						name:'1',
						value:100,
					}
				],
				printingDesign3D:[
					{
						name:'1',
						value:100,
					}
				],
				sketchDesign:[]
			},
			cloudTiltleList:[
				{
					name:'File name',
					value:'name',
				},{
					name:'File size',
					value:'size',
				},{
					name:'UPloaded by',
					value:'upLoadedBy',
				},{
					name:'Task time',
					value:'taskTime',
				},
			],
		})
		const dataDom = reactive({
			createCloud,
		})
		const createClound = ()=>{

		}
		return{
			...toRefs(dataDom),
			...toRefs(data),
			createClound,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.uploading{
		width: 100%;
		height: 100%;
		position: relative;
		padding-top: 3rem;
		display: flex;
		flex-direction: column;
		> .title{
			width: 100%;
			display: flex;
			> .list{
				display: flex;
				margin-bottom: 2.5rem;
				> .titleItem:last-child{
					margin-right: 0;
				}
				> .titleItem{
					position: relative;
					cursor: pointer;
					margin-right: 6.5rem;
				}
				> .titleItem::before {
						position: absolute;
						content: "";
						display: block;
						background: #000;
						height: calc(.4rem*1.2);
						left: 50%;
						transform: translateX(-50%);
						bottom: -.5rem;
						width: 0px;
						transition: 0.3s all;
					}
				> .active {
					color: #000;
					font-weight: 600;
				}
				> .active::before {
					width: 100%;
				}
			}	
			> .createCloud{
				margin-left: auto;
			}
		}
		> .contentList{
			flex: 1;
			overflow: hidden;
			padding-top: 2.5rem;
			> .title{

			}
		}
	}
</style>