给我写一个的简单的商品详情uniapp1界面
时间: 2024-02-05 11:13:48 浏览: 27
好的,以下是一个简单的商品详情界面的代码示例:
```html
<template>
<view class="container">
<image class="cover" :src="product.cover"></image>
<view class="info">
<view class="name">{{ product.name }}</view>
<view class="price">{{ product.price }}</view>
<view class="description">{{ product.description }}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
product: {
name: '商品名称',
price: '99.00',
description: '商品描述',
cover: '/static/product.jpg'
}
}
}
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx;
}
.cover {
width: 300rpx;
height: 300rpx;
margin-bottom: 20rpx;
}
.name {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.price {
font-size: 28rpx;
color: #f00;
margin-bottom: 10rpx;
}
.description {
font-size: 28rpx;
line-height: 40rpx;
}
</style>
```
这个界面包含了一个商品的封面图、名称、价格和描述。如果需要添加更多内容,可以根据实际需求进行扩展。