修改采购页面的样式

ghsApp/src/pagesPurchase/components/CommodityPurchase.vue

@@ -1,32 +1,57 @@
 <template>
-	<view class="item-cmd_bx" @click="customNum">
-		<view class="img_bx">
-			<app-img :src="info.cover" alt="商品图" mode="aspectFit" :height="160" />
-		</view>
-		<view class="cmd-info_bx">
-			<view class="tit">
-				{{ info.itemName || "" }}
-			</view>
+  <view
+    class="item-cmd_bx"
+    @click="customNum"
+  >
+    <view class="img_bx">
+      <app-img
+        :src="info.cover"
+        alt="商品图"
+        mode="aspectFit"
+        :height="160"
+      />
+    </view>
+    <view class="cmd-info_bx">
+      <view class="tit">
+        {{ info.itemName || "" }}
+      </view>
 
-			<view class="kc">{{ info.rank }}级</view>
-			<view class="num-open_bx">
-				<view class="price">
-					<!--<text class="unit">￥</text><text>{{ info.price }}</text>-->
-					<text class="unit">库存：{{ info.stock }}</text>
-				</view>
-				<view class="open-bx">
-					<i class="iconfont iconjian" :class="delAnimationData?'animation':''" @click.stop="delEvent" v-if="bigCount > 0 || smallCount > 0"></i>
-					<text class="num" @click.stop="customNum" >
-<!--					<text class="num" @click="customNum" v-if="bigCount > 0 || smallCount > 0">-->
-						<text v-if="bigCount > 0 || smallCount > 0">{{ `${bigCount}` }}</text>
-						<text v-if="smallCount > 0">/</text>
-						<text v-if="smallCount > 0">{{ `${smallCount}` }}</text>
-					</text>
-					<i class="iconfont iconzeng" :class="addAnimationData?'animation':''" @click.stop="customNum"></i>
-				</view>
-			</view>
-		</view>
-	</view>
+      <view class="num-open_bx">
+        <view style="position: relative;">
+           <view class="kc">{{ info.rank }}级</view>
+        </view>
+        <view>
+          <view class="open-bx">
+            <i
+              class="iconfont iconjian"
+              :class="delAnimationData?'animation':''"
+              @click.stop="delEvent"
+              v-if="bigCount > 0 || smallCount > 0"
+            ></i>
+            <text
+              class="num"
+              @click.stop="customNum"
+            >
+              <!--					<text class="num" @click="customNum" v-if="bigCount > 0 || smallCount > 0">-->
+              <text v-if="bigCount > 0 || smallCount > 0">{{ `${bigCount}` }}</text>
+              <text v-if="smallCount > 0">/</text>
+              <text v-if="smallCount > 0">{{ `${smallCount}` }}</text>
+            </text>
+            <i
+              class="iconfont iconzeng"
+              :class="addAnimationData?'animation':''"
+              @click.stop="customNum"
+            ></i>
+          </view>
+          <view class="price">
+            <!--<text class="unit">￥</text><text>{{ info.price }}</text>-->
+            <text class="unit">还剩：{{ info.stock }}</text>
+          </view>
+        </view>
+
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
@@ -34,165 +59,176 @@ import { COMMODITY_TYPE } from "@/utils/declare";
 import AppImg from "@/components/app-img";
 import animationMins from "@/mixins/animation";
 export default {
-	name: "Commodity",
-	components: {
-		AppImg
-	},
-	mixins: [animationMins],
-	props: {
-		info: {
-			required: true,
-			type: Object,
-			default() {
-				return {};
-			}
-		},
-		type: {
-			type: String,
-			default: COMMODITY_TYPE.COMMON
-		},
-		bigCount: {
-			type: Number,
-			default: 0
-		},
-		smallCount: {
-			type: Number,
-			default: 0
-		},
-		autoPrice: {
-			type: Number,
-			default: 0
-		},
-		itemPrice: {
-			type: Number,
-			default: 0
-		},
-	},
-	data() {
-		return {
-			COMMODITY_TYPE
-		};
-	},
-	created() {},
-	methods: {
-		addEvent() {
-			this.animationFun('add');
-			// let params = {
-			// 	...this.info,
-			// 	bigCount: this.bigCount,
-			// 	smallCount: this.smallCount
-			// };
-			this.$emit("add", this.info);
-		},
-		delEvent() {
-			this.animationFun('del');
-			this.$emit("del", this.info);
-		},
+  name: "Commodity",
+  components: {
+    AppImg
+  },
+  mixins: [animationMins],
+  props: {
+    info: {
+      required: true,
+      type: Object,
+      default () {
+        return {};
+      }
+    },
+    type: {
+      type: String,
+      default: COMMODITY_TYPE.COMMON
+    },
+    bigCount: {
+      type: Number,
+      default: 0
+    },
+    smallCount: {
+      type: Number,
+      default: 0
+    },
+    autoPrice: {
+      type: Number,
+      default: 0
+    },
+    itemPrice: {
+      type: Number,
+      default: 0
+    },
+  },
+  data () {
+    return {
+      COMMODITY_TYPE
+    };
+  },
+  created () { },
+  methods: {
+    addEvent () {
+      this.animationFun('add');
+      // let params = {
+      // 	...this.info,
+      // 	bigCount: this.bigCount,
+      // 	smallCount: this.smallCount
+      // };
+      this.$emit("add", this.info);
+    },
+    delEvent () {
+      this.animationFun('del');
+      this.$emit("del", this.info);
+    },
 
-		removeEvent() {
-			this.$emit("remove", this.info);
-		},
-		changePriceEvent(event) {
-			const {
-				detail: { value }
-			} = event;
-			this.$emit("changePrice", this.info, value);
-		},
-		customNum() {
-			if(!this.bigCount && !this.smallCount){
-				let params = {
-					...this.info,
-					bigCount: this.bigCount,
-					smallCount: this.smallCount,
-					itemPrice: this.itemPrice
-				};
-				this.$emit("addOneEvent", this.info,params,'noAdd');
-			}
-			this.$emit("customNum", {
-				...this.info,
-				bigCount: this.bigCount,
-				smallCount: this.smallCount,
-				itemPrice: this.itemPrice
-			});
-		}
-	}
+    removeEvent () {
+      this.$emit("remove", this.info);
+    },
+    changePriceEvent (event) {
+      const {
+        detail: { value }
+      } = event;
+      this.$emit("changePrice", this.info, value);
+    },
+    customNum () {
+      if (!this.bigCount && !this.smallCount) {
+        let params = {
+          ...this.info,
+          bigCount: this.bigCount,
+          smallCount: this.smallCount,
+          itemPrice: this.itemPrice
+        };
+        this.$emit("addOneEvent", this.info, params, 'noAdd');
+      }
+      this.$emit("customNum", {
+        ...this.info,
+        bigCount: this.bigCount,
+        smallCount: this.smallCount,
+        itemPrice: this.itemPrice
+      });
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
 .item-cmd_bx {
-	position: relative;
-	margin-bottom: 20px;
-	.img_bx {
-		height: 160px;
-		width: 160px;
-		position: absolute;
-		left: 0px;
-		top: 0px;
-	}
-	.cmd-info_bx {
-		padding-left: 177px;
-		& .tit {
-			font-size: 28px;
-			font-weight: 400;
-			color: #333333;
-			padding-top: 10px;
-		}
-		& .kc {
-			color: #999999;
-			font-size: 24px;
-			padding: 10px 0 24px;
-		}
-		& .num-open_bx {
-			display: flex;
-			align-items: center;
-			& .price {
-				flex: 1;
-
-				font-size: 32upx;
-				color: #333;
-				.unit {
-					font-size: 22upx;
-				}
-			}
-			& .open-bx {
-				display: flex;
-				align-items: center;
-				& .iconfont {
-					color: #4db0e4;
-					font-size: 42px;
-				}
-				.icondelete {
-					margin: 0 10px 0 30px;
-					color: #ccc;
-					&.edit {
-						color: #4db0e4;
-					}
-				}
-				& > .num {
-					display: inline-block;
-					width: 120rpx;
-					height:45rpx;
-					text-align:center;
-					margin: 0 8px;
-					color: #868686;
-					border-radius: 22px;
-					background-color: #f5f5f5;
-					padding: 3px 0;
-					font-size: 25rpx;
-				}
-				.change-input {
-					width: 164px;
-					height: 60px;
-					line-height: 60px;
-					text-align: center;
-					background: #ffffff;
-					border: 1px solid #dddddd;
-					border-radius: 4px;
-					font-size: 28px;
-				}
-			}
-		}
-	}
+  position: relative;
+  margin-bottom: 20px;
+  .img_bx {
+    height: 160px;
+    width: 160px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+  }
+  .cmd-info_bx {
+    padding-left: 177px;
+    margin-bottom: 50px;
+    & .tit {
+      font-size: 32px;
+      font-weight: 700;
+      color: #333333;
+      padding-top: 10px;
+    }
+    & .kc {
+      color: #ff2842;
+      font-size: 24px;
+      padding: 10px 0 0;
+      position: absolute;
+      width: 50px;
+      text-align: left;
+      bottom: 0;
+      left: 0;
+    }
+    & .num-open_bx {
+      text-align: right;
+      display: flex;
+      justify-content: space-between;
+      // align-items: center;
+      & .price {
+        font-size: 28rpx;
+        color: #999999;
+        -webkit-box-flex: 1;
+        -webkit-flex: 1;
+        flex: 1;
+        margin-right: 50px;
+        .unit {
+          font-size: 22upx;
+        }
+      }
+      & .open-bx {
+        // display: flex;
+        align-items: center;
+        display: inline-flex;
+        & .iconfont {
+          color: #4db0e4;
+          font-size: 42px;
+        }
+        .icondelete {
+          margin: 0 10px 0 30px;
+          color: #ccc;
+          &.edit {
+            color: #4db0e4;
+          }
+        }
+        & > .num {
+          display: inline-block;
+          width: 120rpx;
+          height: 45rpx;
+          text-align: center;
+          margin: 0 8px;
+          color: #868686;
+          border-radius: 22px;
+          background-color: #f5f5f5;
+          padding: 3px 0;
+          font-size: 25rpx;
+        }
+        .change-input {
+          width: 164px;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          background: #ffffff;
+          border: 1px solid #dddddd;
+          border-radius: 4px;
+          font-size: 28px;
+        }
+      }
+    }
+  }
 }
 </style>