任务列表页面

2024-03-21 10:49:21 +08:00
parent c5e3a5036d
commit c8f6884e7d
23 changed files with 1353 additions and 184 deletions
--- a/src/component/Administrator/TestClickData.vue
+++ b/src/component/Administrator/TestClickData.vue
@@ -53,15 +53,9 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref, createVNode, computed } from "vue";
-import HeaderComponent from "@/component/HomePage/Header.vue";
-import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
 import { Https } from "@/tool/https";
-import RobotAssist from "@/component/HomePage/RobotAssist.vue";
 export default defineComponent({
    components: {
-        HeaderComponent,
-        HistoryDetail,
-        RobotAssist,
    },
    setup() {
        let rangePickerValue: any = ref([]);
--- a/src/component/Administrator/allUser.vue
+++ b/src/component/Administrator/allUser.vue
@@ -29,21 +29,10 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref, createVNode, computed } from "vue";
-import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
-import HeaderComponent from "@/component/HomePage/Header.vue";
-import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
-import router from "@/router/index";
 import { Https } from "@/tool/https";
-import { formatTime } from "@/tool/util";
-import { Modal, message } from "ant-design-vue";
-import RobotAssist from "@/component/HomePage/RobotAssist.vue";
-import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
-import { useI18n } from "vue-i18n";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
 export default defineComponent({
    components: {
-        HeaderComponent,
-        HistoryDetail,
-        RobotAssist,
    },
    setup() {
        let renameData: any = ref({}); //修改名字选中的数据
--- a/src/component/Administrator/trialApproval.vue
+++ b/src/component/Administrator/trialApproval.vue
@@ -68,20 +68,10 @@
 <script lang="ts">
 import { defineComponent, ref, createVNode, computed } from "vue";
 import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
-import HeaderComponent from "@/component/HomePage/Header.vue";
-import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
-import router from "@/router/index";
 import { Https } from "@/tool/https";
-import { formatTime } from "@/tool/util";
 import { Modal, message } from "ant-design-vue";
-import RobotAssist from "@/component/HomePage/RobotAssist.vue";
-import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
-import { useI18n } from "vue-i18n";
 export default defineComponent({
    components: {
-        HeaderComponent,
-        HistoryDetail,
-        RobotAssist,
    },
    setup() {
        let renameData: any = ref({}); //修改名字选中的数据
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -187,7 +187,7 @@
 				</div>
 				<div class="exportCanvasBox_right_btn">
 					<div class="subitOkPreviewBtn" :class="{active:credits<1}" @click="setHDExport">HD Export</div>
-					<div class="subitOkPreviewBtn" @click="setExport">Export</div>
+					<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">Export</div>
 				</div>
            </div>
            <div class="mark_loading" v-show="isShowMark">
@@ -204,7 +204,9 @@ import scaleImage from "@/component/HomePage/scaleImage.vue";
 import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
 import { useStore } from "vuex";
 import JSZip, { forEach } from "jszip";
+// import fabric from 'fabric';
 import { message, Modal } from "ant-design-vue";
+import { openGuide,driverObj__ } from "@/tool/guide";
 const FileSaver = require("file-saver");
 import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
 export default defineComponent({
@@ -214,6 +216,9 @@ export default defineComponent({
    },
    props: ["msg", "sketchCatecoryList"],
    setup() {
+		let driver__ = computed(()=>{
+			return store.state.Guide.guide
+		})
        const store = useStore();

        let showUpgradePlan = ref(false);
@@ -271,6 +276,8 @@ export default defineComponent({
                    height: canvasWH.value.height,
                    isDrawingMode: false, // 开启绘图模式
                });
+				brushIndicator = clearBrushIndicator()
+
 				JSchangeType(canvas,'init')
 				canvasOnDrop()//开启鼠标到画布事件
 				setRemoveImage()//设置元素删除
@@ -411,7 +418,11 @@ export default defineComponent({
 					}
                }
 				updateCanvasState('')//加载完成后记录一下
+				if(driver__.value.driver){
+					driverObj__.moveNext()
+				}
            });
+			
        };
 		let deleteObject = (eventData, transform)=> {
 				// var target = [transform.target];
@@ -610,6 +621,9 @@ export default defineComponent({
                        FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
                        isShowMark = false;
                    });
+					if(driver__.value.driver){
+						driverObj__.moveNext()
+					}
                })
                .catch((res) => {
                    // message.warning(t('HomeView.jsContent3'));
@@ -910,7 +924,7 @@ export default defineComponent({
 		}
 		let textureList = ref([])
 		for (let index = 0; index < 20; index++) {
-			textureList.value.push({value:index,url:`./image/texture/texture${index}.webp`})
+			textureList.value.push({value:index,url:`/image/texture/texture${index}.webp`})
 		}
 		let setTexture = async ()=>{
 			canvas.isDrawingMode = true//开启绘画模式
@@ -942,16 +956,20 @@ export default defineComponent({
 			}

 		}
-		let brushIndicator = new fabric.Circle({
-			radius:canvasPencilWidth.value/2,
-            fill: '#fff',
-			stroke: '#000',
-			strokeWidth: 0,
-            originX: 'center',
-            originY: 'center',
-			visible :true,
-			erasable: false,
-        });
+		let clearBrushIndicator = ()=>{
+			let cator = new fabric.Circle({
+				radius:canvasPencilWidth.value/2,
+				fill: '#fff',
+				stroke: '#000',
+				strokeWidth: 0,
+				originX: 'center',
+				originY: 'center',
+				visible :true,
+				erasable: false,
+			});
+			return cator
+		}
+		let brushIndicator 
 		let hexToRgba=(hex, alpha)=> {
 			const r = parseInt(hex.slice(1, 3), 16);
 			const g = parseInt(hex.slice(3, 5), 16);
@@ -961,31 +979,31 @@ export default defineComponent({
 		let brushList = ref([
 			{
 				value:'PencilBrush',
-				url:'./image/brush/PencilBrush.jpg'
+				url:'/image/brush/PencilBrush.jpg'
 			},{
 				value:'Marking',
-				url:'./image/brush/PencilBrush-2.jpg'
+				url:'/image/brush/PencilBrush-2.jpg'
 			},{
 				value:'InkBrush',
-				url:'./image/brush/InkBrush.jpg'
+				url:'/image/brush/InkBrush.jpg'
 			},{
 				value:'CrayonBrush',
-				url:'./image/brush/CrayonBrush.jpg'
+				url:'/image/brush/CrayonBrush.jpg'
 			},{
 				value:'RibbonBrush',
-				url:'./image/brush/RibbonBrush.jpg'
+				url:'/image/brush/RibbonBrush.jpg'
 			},{
 				value:'MarkerBrush',
-				url:'./image/brush/MarkerBrush.jpg'
+				url:'/image/brush/MarkerBrush.jpg'
 			},{
 				value:'WritingBrush',
-				url:'./image/brush/WritingBrush.jpg'
+				url:'/image/brush/WritingBrush.jpg'
 			},{
 				value:'LongfurBrush',
-				url:'./image/brush/LongfurBrush.jpg'
+				url:'/image/brush/LongfurBrush.jpg'
 			},{
 				value:'SpraypaintBrush',
-				url:'./image/brush/SpraypaintBrush.jpg'
+				url:'/image/brush/SpraypaintBrush.jpg'
 			},
 		])
 		let setPencil =()=>{
--- a/src/component/HomePage/Header.vue
+++ b/src/component/HomePage/Header.vue
@@ -47,38 +47,22 @@
 					<i @click="Assignment" class="fi fi-rr-gift" title="Assignment"></i>
 					<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
                </div>
-				<!-- <div
-					v-if="userInfo.userId == 83"
-					class="trialApproval button_second"
-                    @click="turnToPage('trialApproval')"
-                >
-					Trial Approval
-                </div> -->
            </div>
            <nav class="header_nav_content">
-                <div
-                    :class="[
-                        'nav_item',
-                        $route.name === 'home' ? 'select_nav' : '',
+                <div :class="['nav_item',$route.name === 'home' ? 'select_nav' : '',
                    ]"
                    @click="turnToPage('home')"
                >
 					{{$t('Header.HOME')}}
                </div>
                <div
-                    :class="[
-                        'nav_item',
-                        $route.name === 'library' ? 'select_nav' : '',
-                    ]"
+                    :class="['nav_item', $route.name === 'library' ? 'select_nav' : '',]"
                    @click="turnToPage('library')"
                >
 					{{$t('Header.LIBRARY')}}
                </div>
                <div
-                    :class="[
-                        'nav_item',
-                        $route.name === 'history' ? 'select_nav' : '',
-                    ]"
+                    :class="['nav_item',$route.name === 'history' ? 'select_nav' : '',]"
                    @click="turnToPage('history')"
                >
 					{{$t('Header.HISTORY')}}
@@ -92,8 +76,7 @@
                @click="turnToNewPage('https://www.aidlab.hk/en/')"
                src="@/assets/images/loginPage/aida_logo.png"
            />
-			<Habit></Habit>
-
+				<Habit></Habit>
 			</div>
        </header>
 		<nav class="select_block" v-show="isShowOperate">
--- a/src/component/HomePage/TaskDetailPage.vue
+++ b/src/component/HomePage/TaskDetailPage.vue
@@ -0,0 +1,327 @@
+<template>
+    <a-modal
+        class="modal_component TaskDetail_modal payOrder_modal"
+        v-model:visible="showPayOrder"
+        :footer="null"
+        width="78%"
+        :maskClosable="false"
+        :centered="true"
+        :closable="false"
+        wrapClassName="#app"
+        :keyboard="false"
+    >
+		<div class="payOrder_page ">
+			<div class="closeIcon">
+				<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
+			</div>
+			<div class="creditsDetail_table_search allOrder_table_search">
+				<div class="creditsDetail_state allOrder_state">
+					<div class="creditsDetail_state_item allOrder_state_item">
+						<span>State:</span>
+						<a-select style="width:25rem" v-model:value="currentState.value" size="large" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
+					</div>
+				</div>
+
+				
+				<div class="creditsDetail_search allOrder_search">
+					<div
+						class="creditsDetail_search_item allOrder_search_item"
+						@click="searchcreditsDetailList()"
+					>
+						<span
+							class="icon iconfont icon-sousuo"
+						></span>
+					</div>
+				</div>
+			</div>
+			<div class="TaskDetail_page" ref="historyTable">
+				<a-table
+					:columns="columns"
+					:data-source="collectionList"
+					:scroll="{ y: historyTableHeight }"
+					@change="changePage"
+					:pagination="{
+						showSizeChanger: true,
+						current: currentPage,
+						pageSize: pageSize,
+						total: total,
+						showQuickJumper: true,
+						bordered: false,
+					}"
+				>
+					<template
+						#bodyCell="{ column, text, record, index }"
+					>
+						<div
+							class="operate_list"
+							v-if="column?.Operations"
+						>
+							<div class="operate_item">{{ $t('HistoryPage.Delete') }}</div>
+						</div>
+					</template>
+				</a-table>
+			</div>
+		</div>
+      
+	
+    </a-modal>
+	<div class="mark_loading" v-show="loadingShow">
+		<a-spin size="large" />
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent, ref, createVNode, computed, nextTick } from "vue";
+import { Https } from "@/tool/https";
+import { formatTime } from "@/tool/util";
+import { Modal, message } from "ant-design-vue";
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import { useI18n } from "vue-i18n";
+export default defineComponent({
+    components: {
+    },
+    setup() {
+        let presentState: any = ref('paypal');
+        let showPayOrder: any = ref(false);
+        let loadingShow: any = ref(false);//原因
+        let { t } = useI18n();
+		const columns: any = computed(() => {
+            return [
+                {
+                    title: "Serial",
+                    align: "center",
+                    ellipsis: true,
+                    dataIndex: "orderNo",
+                    key: "orderNo",
+                },
+                {
+                    title: "Title",
+                    align: "center",
+                    ellipsis: true,
+                    dataIndex: "title",
+                    key: "title",
+                },
+                {
+                    title: "Money",
+                    align: "center",
+                    ellipsis: true,
+                    dataIndex: "totalFee",
+                    key: "totalFee",
+                },
+                {
+                    title: "Payment",
+                    align: "center",
+                    ellipsis: true,
+                    dataIndex: "paymentType",
+                    key: "paymentType",
+                },
+                {
+                    title: "State",
+                    align: "center",
+                    ellipsis: true,
+                    dataIndex: "orderStatus",
+                    key: "orderStatus",
+                },
+
+                // {
+                //     title: useI18n().t("HistoryPage.Operations"),
+                //     key: "operation",
+                //     align: "center",
+                //     // slots:{customRender:'action'}
+                //     Operations: true,
+                // },
+            ];
+		
+        });
+		let currentState = ref({
+			value:'income',
+		})
+		let state:any = ref([
+			{
+				label:'Income',
+				value:'income',
+			},
+			{
+				label:'Expend',
+				value:'expend',
+			},
+		])
+        let collectionList: any = ref([]);
+        return {
+            presentState,
+            showPayOrder,
+			loadingShow,
+            t,
+			columns,
+			currentState,
+			state,
+			collectionList,
+        };
+    },
+    data() {
+        return {
+			currentPage: 1,
+            pageSize: 10,
+            total: 0,
+			historyTableHeight: 0,
+        };
+    },
+    mounted() {
+		// let historyTable: any = this.$refs.historyTable;
+        // this.historyTableHeight = historyTable.clientHeight - 130;
+		// console.log(historyTable);
+	},
+    methods: {
+        init() {
+            this.showPayOrder = true;
+			this.currentPage = 1
+			this.pageSize = 10
+			this.getTaskDetail()
+        },
+		 //改变页码
+		 changePage(e: any) {
+            this.currentPage = e.current
+            this.pageSize = e.pageSize
+            this.getTaskDetail();
+        },
+		//查询列表
+		searchcreditsDetailList() {
+            this.currentPage = 1;
+            this.getTaskDetail();
+        },
+		getTaskDetail() {
+			let data = {
+				isIncome: this.currentState.value == 'income'?true:false,
+				page:this.currentPage,
+                size:this.pageSize,
+			}
+			console.log(data);
+			// getCreditsDetail
+			// orderInfoList
+            Https.axiosPost(Https.httpUrls.getCreditsDetail,data).then((rv: any) => {
+                this.total = rv.length;
+                this.collectionList = rv
+				if(this.currentPage > 1 && rv.content.length == 0){
+					this.currentPage = 1
+					this.getTaskDetail()
+				}else{
+					this.collectionList = rv.content
+					this.total = rv.total
+				}
+				
+            });
+        },
+		cancelDsign(){
+			this.showPayOrder = false
+		}
+    },
+});
+</script>
+<style lang="less">
+.TaskDetail_modal {
+   
+}
+</style>
+<style lang="less">
+.payOrder_modal {
+    .closeIcon {
+        z-index: 2;
+    }
+    .payOrder_page {
+        width: 100%;
+        height: 100%;
+        padding: 9rem;
+        overflow: hidden;
+        // min-width: 1440px;
+        position: relative;
+		.allOrder_table_search {
+		display: flex;
+		margin-top: 2rem;
+		padding: 2rem 3.5rem 5rem 2.8rem;
+		background: #fff;
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		
+		.allOrder_search{
+			width: 20%;
+			.allOrder_search_item{
+				background: #343579;
+				border-color: #343579;
+				height: 4rem;
+				padding: .64rem 1.5rem;
+				font-size: 1.6rem;
+				border-radius: 2px;
+				display: inline-block;
+				color: #fff;
+				cursor: pointer;
+			}
+		}
+		.allOrder_state {
+			position: relative;
+			display: flex;
+			align-items: center;
+			width: 80%;
+			.allOrder_state_item{
+				display: flex;
+				align-items: center;
+				margin-right: 5rem;
+				>span{
+					font-size: 2rem;
+					font-weight: 400;
+					color: #030303;
+					margin-right: 15px;
+					flex-shrink: 0;
+					display: block;
+					min-width: 5rem;
+					text-align: left;
+				}
+				.ant-picker-range{
+					height: 5rem;
+				}
+				.ant-select-lg{
+					font-size: 14px;
+					.ant-select-selector{
+						height: 5rem;
+						.ant-select-selection-item{
+							line-height: 5rem;
+						}
+						input{
+							line-height: 5rem;
+							height: 5rem;
+						}
+					}
+				}
+			}
+			.allOrder_current{
+				background: #fff;
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+			.header_user_content {
+				position: absolute;
+				border: 2px solid;
+				border-radius: 1rem;
+				overflow: hidden;
+				top: 0;
+				transform: translateY(6rem);
+				z-index: 2;
+				display: none;
+				margin-left: -2rem;
+				.username{
+					padding: 0 2rem;
+					color: #000;
+				}
+				.username:hover{
+					background: #e1e1e1;
+				}
+				&.active{
+					display: block;
+				}
+			}
+		}
+	}
+	}
+}
+</style>
--- a/src/component/HomePage/TaskPage.vue
+++ b/src/component/HomePage/TaskPage.vue
@@ -7,8 +7,30 @@
 		placement="right"
 		@after-visible-change="afterVisibleChange"
 	>
+		<template #extra>
+			<div class="button_second" @click="openTaskDetailPage">Detailed Task</div>
+		</template>
 		<div class="task_content">
 			<div class="task_content_item" v-for="item in taskList">
+				<img v-if="item.state !== 'success'" src="@/assets/images/homePage/loading.gif" alt="">
+				<img v-else :src="item.inputParam.images" alt="">
+				<div class="task_content_item_text">
+					<div class="task_content_item_text_left modal_title_text">
+						<div class="task_content_item_text_left_titile">{{ item.title }}</div>
+						<div class="task_content_item_text_left_into modal_title_text_intro">{{ item.createDate }}</div>
+					</div>
+					<div class="task_content_item_text_right modal_title_text">
+						<div class="task_content_item_text_left_titile">{{ item.status }}</div>
+					</div>
+				</div>
+			</div>
+			<div class="task_content_more" v-show="taskListMore.length == 0" @click="setTaskListMore">
+				点击查看更多
+			</div>
+			<div class="task_content_select" v-show="taskListMore.length > 0">
+				<a-select :visibleChange="visibleChange()" v-model:value="currentState.value" size="large" optionFilterProp="label" :options="state" placeholder="Please select" :getPopupContainer="getPopupContainer" allowClear show-search></a-select>
+			</div>
+			<div class="task_content_item" v-for="item in taskListMore" v-show="taskListMore.length > 0">
 				<img v-if="item.state === '执行中' || item.state === '失败'" src="@/assets/images/homePage/loading.gif" alt="">
 				<img v-else :src="item.url" alt="">
 				<div class="task_content_item_text">
@@ -21,10 +43,11 @@
 					</div>
 				</div>
 			</div>
-			<div class="task_content_more">
-				点击查看更多
+			<div v-show="total > taskListMore?.length && total != 0 && taskListMore.length > 0" class="task_content_more" v-observe>
+				<img src="@/assets/images/homePage/loading.gif" alt="">
 			</div>
 		</div>
+		<TaskDetailPage ref="TaskDetailPage"></TaskDetailPage>
 	</a-drawer>
 </template>
 <script lang="ts">
@@ -32,12 +55,11 @@ import { message, Upload } from "ant-design-vue";
 import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
-import GO from "@/tool/GO";
 // import { forEach } from "jszip";
-import scaleImage from "@/component/HomePage/scaleImage.vue";
+import TaskDetailPage from "@/component/HomePage/TaskDetailPage.vue";
 export default defineComponent({
 	components: {
-		scaleImage,	
+		TaskDetailPage,	
 	},
    props: ["msg",'sketchCatecoryList'],
    setup() {
@@ -45,41 +67,64 @@ export default defineComponent({
        const store = useStore();
       	let visible = ref<boolean>(false);
 		let taskList = ref([
-			{
-				title:'111111111111',
-				state:'执行中',
-				url:'@/assets/images/homePage/loading.gif',
-				time:'2024-3-18'
-			},{
-				title:'111111111111',
-				state:'已完成',
-				url:'./image/texture/texture0.webp',
-				time:'2024-3-18'
-			},{
-				title:'111111111111',
-				state:'失败',
-				url:'@/assets/images/homePage/loading.gif',
-				time:'2024-3-18'
-			},{
-				title:'111111111111',
-				state:'执行中',
-				url:'@/assets/images/homePage/loading.gif',
-				time:'2024-3-18'
-			},
+		
 		])
+		let taskListMore:any = ref([])
+		let state:any = ref([
+			{
+				label:'Income',
+				value:'income',
+			},
+			{
+				label:'Expend',
+				value:'expend',
+			}
+		])
+		let currentState = ref({
+			value:'income',
+		})
        return {
 			store,
 			visible,
 			taskList,
+			taskListMore,
+			state,
+			currentState,
        };
    },
    data(prop) {
        return {
+			currentPage: 1,
+            pageSize: 10,
+            total: 99,
 		}
    },
 	
    mounted() {
    },
+	directives:{
+		observe:{
+			mounted (el,binding) {
+				// console.log(binding.instance);
+				const ob = new IntersectionObserver(callback,{
+					root:null,
+					threshold:[0.1]
+				})
+				ob.observe(el)
+				// this.currentPage = 1
+				// this.pageSize = 12
+				let this_:any = binding.instance
+				function callback(entries:any, observer:any) {
+					entries.forEach((entry:any) => {
+						if (entry.isIntersecting) {
+							this_.getTaskList()
+						} else {
+						}
+					});
+				}
+			},
+		},
+	},
 	watch:{
 		// newWindowState:{
 		// 	handler(newVal,oldVal){
@@ -92,11 +137,55 @@ export default defineComponent({
 		
 	},
    methods: {
+		getPopupContainer(){
+			let dom = document.querySelector('.task_page .task_content_select')
+			return dom
+		},
        init(){
 			this.visible = true
+			Https.axiosGet(Https.httpUrls.getTasksList).then((rv)=>{
+
+				this.taskList = this.sort(rv)
+			})
+		},
+		sort(arr:any){
+			arr.sort((a:any, b:any) => {
+				var a_num = Date.parse(a.createDate);
+				var b_num = b.style.zIndex;
+				return a_num - b_num;
+			});
+			return arr
 		},
 		afterVisibleChange(bool:any){
+			if(!bool){
+				this.taskListMore = []
+			}
 			console.log(bool);
+		},
+		setTaskListMore(){
+			// this.taskListMore = this.taskList
+			
+			this.taskListMore.push(...this.taskList,...this.taskList)
+		},
+		openTaskDetailPage(){
+			let taskDetailPage:any = this.$refs.TaskDetailPage
+			this.visible = false
+			taskDetailPage.init()
+		},
+		visibleChange(){
+			this.pageSize = 10
+			this.currentPage = 1
+			this.total = 0
+		},
+		getTaskList(){
+			let data = {
+				size:this.pageSize,
+                page: this.currentPage,
+				aaa:this.currentState,
+			}
+			console.log(123123);
+			this.currentPage += 1
+			Https.axiosGet()
 		}
    },
 });
@@ -174,8 +263,17 @@ export default defineComponent({
 			line-height: 5rem;
 			text-align: center;
 			cursor: pointer;
+			img{
+				width: 100%;
+				height: 5rem;
+				object-fit: contain;
+			}
+		}
+		.task_content_select{
+			>div{
+				width: 100%;
+			}
 		}
-
 	}
 }
 	
--- a/src/component/HomePage/UpgradePlan.vue
+++ b/src/component/HomePage/UpgradePlan.vue
@@ -208,7 +208,11 @@ export default defineComponent({
 			// console.log(this.modeOfPayment,'alipay','paypal');
 			let url = window.location.href 
 			// url = url.replace(/\/[^/]+$/, '') + '/home';
-			url = url.replace(/\/[^/]+$/, '') + '/paySucceed';
+			// console.log(url);
+			let parsedUrl = new URL(url);
+			parsedUrl.pathname = '/';
+			console.log(parsedUrl);
+			url = parsedUrl.href + 'paySucceed';
 			if(!this.clause){
 				return
 			}
--- a/src/component/Pay/allOrder.vue
+++ b/src/component/Pay/allOrder.vue
@@ -22,7 +22,6 @@
 				</div>
 			</div>

-			
 			<div class="allOrder_search">
 				<div
 					class="allOrder_search_item"
@@ -257,7 +256,6 @@ export default defineComponent({
 			position: relative;
 			display: flex;
 			align-items: center;
-			cursor: pointer;
 			width: 80%;
 			.allOrder_state_item{
 				display: flex;
--- a/src/component/Pay/creditsDetail.vue
+++ b/src/component/Pay/creditsDetail.vue
@@ -22,7 +22,7 @@
 				</div>
 				<div class="creditsDetail_state_item">
 					<span>State:</span>
-					<a-select v-model:value="currentState.value" size="large" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
+					<a-select v-model:value="currentState.value" style="width:25rem" size="large" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
 				</div>
 			</div>