<view class='title'> {{productInfo.name}} </view> <!-- 其他介绍 --> <view class='ping'>暂无评价</view> <!-- 商品详情 --> <view class='product_detail'> <view class='detail'>商品详情</view> <view class='wrapper'> <image src='{{productInfo.pic}}' class='img'></image> <view class='text'> {{productInfo.description}} <view>{{productInfo.details}}</view> </view> </view> </view> <!-- 底部购买 --> <view class='shop_bottom'> <view class='juli'> <image src='../../images/tab9.png' class='shop' bindtap='goShoping'></image> <text></text> </view> <view class='add_cart' bindtap='addShop'>加入购物车</view> <view class='buy_now' bindtap='buyNow'>立即购买</view> </view>帮我写优化这个代码并且写一个wxss美化

下面是优化后的代码，并且加入了一些wxss美化效果：

wxml代码：

<view class="product">
  <view class="product__header">{{productInfo.name}}</view>
  <view class="product__rating">暂无评价</view>
  <view class="product__details">
    <view class="details__header">商品详情</view>
    <view class="details__content">
      <image src="{{productInfo.pic}}" class="details__image"></image>
      <view class="details__text">
        {{productInfo.description}}
        <view>{{productInfo.details}}</view>
      </view>
    </view>
  </view>
  <view class="product__footer">
    <view class="footer__button" bindtap="addShop">加入购物车</view>
    <view class="footer__button" bindtap="buyNow">立即购买</view>
  </view>
</view>

wxss代码：

.product {
  font-size: 28rpx;
  color: #333;
  margin: 20rpx;
}

.product__header {
  font-size: 34rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.product__rating {
  color: #999;
  margin-bottom: 20rpx;
}

.product__details {
  margin-bottom: 20rpx;
}

.details__header {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.details__content {
  display: flex;
  flex-direction: row;
}

.details__image {
  width: 300rpx;
  height: 300rpx;
  margin-right: 20rpx;
}

.details__text {
  flex: 1;
  line-height: 1.5;
}

.product__footer {
  display: flex;
  flex-direction: row;
}

.footer__button {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  background-color: #f00;
  text-align: center;
  padding: 20rpx;
  margin-right: 10rpx;
  border-radius: 10rpx;
}

.footer__button:last-child {
  margin-right: 0;
}

注：以上代码仅供参考，具体的样式和布局需要根据实际情况进行调整。