first commit

src/components/material-info/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="material-info">
+    <div>单量: {{preSaleCount}}，已选袋子件数/数量: {{totalBag.unitCount}}件/{{totalBag.totalCount}}个</div>
+    <div :class="{danger: bagOverload !== '未超出购买限制'}">{{bagOverload}}</div>
+  </div>
+</template>
+
+<script>
+import {mapGetters} from 'vuex'
+export default {
+  computed: {
+    ...mapGetters({
+      preSaleCount: 'indexPage/preSaleCount',
+      totalBag: 'indexPage/totalBag',
+      bagOverload: 'indexPage/bagOverload',
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+ @use "./material-info.scss"
+</style>

src/components/material-info/material-info.scss

@@ -0,0 +1,11 @@
+ @use '@/assets/bundle.scss';
+
+.material-info {
+  font-size: 30rpx;
+  color: #606266;
+  text-align: center;
+  .danger {
+    color: #F56C6C;
+    font-weight: 500;
+  }
+}