uniapp 学习笔记二产品列表

Bertha 。 2024-04-08 12:11 98阅读 0赞

![84ea4436659b42aba097c782b7f8a660.png][]

cake.vue

<template>
        <view>
            
            <view class="flex justify-between padding">
                <view class="">
                    猫屎咖啡
                </view>
                <view class="">
                    牛奶拿铁
                </view>
            </view>
            
            <view class="cont">
                <view class="cake-item" v-for="(item,index) in 8">
                    <view class="poster">
                        
                    </view>
                    <view class="info-cont">
                        <view class="info">
                            <view class="fs-28">
                                黄油咖啡                            
                            </view>
                            <view class="fs-16">
                                Huangyou Coffee
                            </view>
                            <view class="fs-18">
                                <text class="fs-14">Y</text>
                                218.00
                            </view>
                            
                        </view>
                        <view class="cart-btn">
                            
                        </view>
                        
                    </view>
                </view>
                
            </view>
            
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    
                }
            },
            methods: {
                
            }
        }
    </script>
    
    <style lang="scss">
    .cont{
        display: flex;
        flex-wrap: wrap;
        padding: 15upx;
        justify-content: space-between;
    }
    .cake-item{
        width: 350upx;
        .poster{
            height: 350upx;
            background-color: #f5f5f5;
        }
        .fs-28{
            font-size: 28upx;
            margin-top: 24upx;
        }
        .fs-16{
            font-size: 16upx;
            margin: 14upx 0;
        }
        .fs-18{
            font-size: 18upx;
            margin-bottom: 22upx;
        }
    }
    
    </style>

/* 字体图标 */
    @import '@/static/font/iconfont.css';
    
    /* ColorUI 引入 */
    @import '@/static/colorui/main.css';
    @import '@/static/colorui/icon.css';

iconfont.css

@font-face {
      font-family: "iconfont"; /* Project id 3599881 */
      src: url('@/static/font/iconfont.woff2?t=1660902218891') format('woff2'),
           url('@/static/font/iconfont.woff?t=1660902218891') format('woff'),
           url('@/static/font/iconfont.ttf?t=1660902218891') format('truetype');
    }

[84ea4436659b42aba097c782b7f8a660.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/944f505f6b074b5aac11d80d908fcd59.png