带背景按钮组件

src/components/ButtonBg.vue

@@ -0,0 +1,65 @@
+<template>
+    <div :class="`btn btn-${type} iconfont ${isRight ? 'isRight' : ''}`">
+        <span><slot></slot></span>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['type', 'isRight']
+};
+</script>
+
+<style lang="less" scoped>
+.btn {
+    position: relative;
+    width: 163px;
+    height: 48px;
+    &::before {
+        content: '\e61e';
+        font-size: 48px;
+        line-height: 48px;
+    }
+    span {
+        position: absolute;
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+@warning: #ffc72c;
+
+.isRight {
+    &::before {
+        transform: rotate(180deg);
+        display: inline-block;
+    }
+}
+
+.btn-warning {
+    &::before {
+        color: @warning;
+    }
+
+    &:active {
+        &::before {
+            color: darken(@warning, 10);
+        }
+    }
+}
+
+.btn-prim {
+    &::before {
+        color: @prim;
+    }
+
+    &:active {
+        &::before {
+            color: darken(@prim, 10);
+        }
+    }
+}
+</style>

src/pages/store/homePage.vue

@@ -37,11 +37,18 @@
         <van-dropdown-menu>
             <van-dropdown-item title-class="van-icon van-icon-arrow" :value="value1" :options="option1" />
         </van-dropdown-menu>
+
+        <div class="bottom">
+            <button-bg type="warning">分享店铺</button-bg>
+            <button-bg type="prim" isRight>管理商品</button-bg>
+        </div>
     </div>
 </template>
 
 <script>
+import ButtonBg from '../../components/ButtonBg.vue';
 export default {
+    components: { ButtonBg },
     data() {
         return {
             option1: [{ text: '全部商品', value: 0 }, { text: '新款商品', value: 1 }, { text: '活动商品', value: 2 }],
@@ -125,4 +132,15 @@ export default {
 
     box-shadow: 0 2px 12px rgb(100 101 102 / 12%);
 }
+
+.bottom {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    .flex();
+    padding: 6px 20px;
+    .bottom(6px);
+    justify-content: space-between;
+}
 </style>

src/styles/font.less

@@ -4,9 +4,9 @@
 }
 @font-face {
     font-family: 'iconfont'; /* Project id 2504712 */
-    src: url('//at.alicdn.com/t/font_2504712_nvyypmzzz6r.woff2?t=1620459144507') format('woff2'),
-        url('//at.alicdn.com/t/font_2504712_nvyypmzzz6r.woff?t=1620459144507') format('woff'),
-        url('//at.alicdn.com/t/font_2504712_nvyypmzzz6r.ttf?t=1620459144507') format('truetype');
+    src: url('//at.alicdn.com/t/font_2504712_37jeq6r3j0w.woff2?t=1620984863369') format('woff2'),
+        url('//at.alicdn.com/t/font_2504712_37jeq6r3j0w.woff?t=1620984863369') format('woff'),
+        url('//at.alicdn.com/t/font_2504712_37jeq6r3j0w.ttf?t=1620984863369') format('truetype');
 }
 
 .iconfont {
@@ -25,3 +25,8 @@
 .iconfont-liebiao:before {
     content: '\e61d';
 }
+
+
+.iconfont-button:before {
+    content: '\e61e';
+}