uniapp 学习笔记二产品列表

最新推荐文章于 2024-06-23 23:59:23 发布

ggome

最新推荐文章于 2024-06-23 23:59:23 发布

阅读量273

点赞数

分类专栏： uni-app 文章标签： uni-app 学习 html

本文链接：https://blog.csdn.net/gixome/article/details/126522629

版权

uni-app 专栏收录该内容

109 篇文章 42 订阅

订阅专栏

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');
}