做个下面代码的样式：<template> <view class="detail" v-if="detail.big_img!=undefined"> <view class="img"> <image :src="'http://localhost:3000/'+detail.big_img" mode=""></image> </view> <view class="content"> <view class="name-price"> <view class="name">{{detail.name}}</view> <view class="name">{{detail.price}}</view> </view> <view class="type"> <view class="type-item" v-for="(item,index) in rules" :key="index"> <view class="type-left">{{item.type}}</view> <view class="type-right"> <text :class="{active:item.activeIndex==count}" @click="item.activeIndex=count" v-for="(value,count) in item.typeValue" :key="count">{{value}}</text> </view> </view> </view> <!-- 选择数量 --> <view class="choose-num"> <text>选择数量</text> <view class="step"> <text @click="jian">-</text> <text>{{num}}</text> <text @click="add">+</text> </view> </view> <!-- 选择数量结束 --> <!-- 商品描述开始 --> <view class="desc"> <view class="title">商品描述</view> <view v-for="(item,index) in detail.desc" :key="index"> <!-- {{index+1}} -->{{item}} </view> </view> <!-- 商品描述结束 --> </view> <!-- 底部 --> <view class="footer"> <view class="car">购物车</view> <view class="like">收藏</view> <view class="add-car-go-buy"> <view class="add-car">加入购物车</view> <view class="go-buy" @click="buy">立即购买</view> </view> </view> </view> </template>

好，以下是一个可能的样式：

.detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}

.img {
  width: 100%;
  height: 400px;
  overflow: hidden;
  margin-bottom: 20px;
}

.img image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.name-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.type {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.type-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.type-left {
  font-size: 16px;
  font-weight: bold;
}

.type-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.type-right text {
  margin-right: 10px;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #ccc;
  cursor: pointer;
}

.type-right text.active {
  background-color: #f60;
  color: #fff;
}

.choose-num {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.choose-num text {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}

.step {
  display: flex;
  justify-content: center;
  align-items: center;
}

.step text {
  margin: 0 10px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.desc {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.desc view {
  margin-bottom: 10px;
}

.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer view {
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

.footer .car {
  background-color: #f60;
  color: #fff;
  margin-right: 10px;
}

.footer .like {
  background-color: #ccc;
  color: #333;
  margin-right: 10px;
}

.add-car-go-buy {
  display: flex;
  justify-content: center;
  align-items: center;
}

.add-car {
  background-color: #ccc;
  color: #333;
  margin-right: 10px;
}

.go-buy {
  background-color: #f60;
  color: #fff;
}

您可以将上述 CSS 样式添加到您的代码中，并根据需要进行调整。