付款页面新增按钮

src/component/DetailCopy/model/index.vue

@@ -6,9 +6,9 @@
 		<div class="modelindex_right">
 			<div class="detail_btn">
 				<!-- 全屏 --> 
-				<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
+				<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i>
 				<!-- 编辑 -->
-				<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
+				<i class="fi fi-rr-edit" :class="{active:isEditPattern.value}" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail('edit')"></i>
 				<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
 				<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
 
@@ -35,6 +35,7 @@ export default defineComponent({
     components:{
 		position,modelNav
     },
+	emits:['detailEdit'],
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
@@ -45,6 +46,7 @@ export default defineComponent({
 			pageSize:10,
 			currentPage:1,
 			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			isEditPattern:inject('isEditPattern') as any
 		})
 		const getDetailListDom = reactive({
 			libraryList:null as any,
@@ -53,8 +55,8 @@ export default defineComponent({
 		const getSubmitData = (value:any)=>{
 			return getDetailListDom.position.getSubmitData(value)
 		}
-		const showDesignImgDetail = ()=>{
-
+		const showDesignImgDetail = (str:any)=>{
+			emit('detailEdit',str)
 		}
 		const deleteNav = ()=>{
 
@@ -98,13 +100,32 @@ export default defineComponent({
 				width: 100%;
 				display: flex;
 				justify-content: space-between;
+				border-radius: 1rem;
+				padding: .7rem ;
 				> i{
 					font-size: 2rem;
+					line-height: 4rem;
+					cursor: pointer;
+					padding: 1.5rem;
+					display: flex;
+					align-items: center;
+					border-radius: .6rem;
+					overflow: hidden;
+					transition: all .3s;
 				}
+				> i:hover{
+					background: #000000;
+					color: #fff;
+				}
+				> .active{
+					background: #000000;
+					color: #fff;
+				}	
 			}
 		}
 		.modelindex_left{
 			justify-content: center;
 		}
+	
 	}
 </style>