魔方财务购物车介绍美化

教程

1.进入速科模板后台

2.侧边栏选择实用插件

3.选择全局文件-购物车CSS代码添加上去

4.商品介绍 财务后台-商品设置-编辑产品-详情（将代码放置在商品描述中）

样式一

CSS代码：

<style>
  .cart-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  
  .cart-config-item {
    padding: 8px;
    border-radius: 8px;
    background: #f8f9fb;
  }
  
  .cart-config-label {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 4px;
    white-space: nowrap;
  }
  
  .cart-config-value {
    font-size: 13px;
    color: #212529;
    font-weight: 600;
    white-space: nowrap;
  }
  
  .cart-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
  }
  
  .cart-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #edf2f7;
    color: #4a5568;
  }
</style>

商品介绍：

<div class="cart-product-grid">
  <div class="cart-config-item">
    <div class="cart-config-label">CPU</div>
    <div class="cart-config-value">2C 100%性能</div>
  </div>
  
  <div class="cart-config-item">
    <div class="cart-config-label">内存</div>
    <div class="cart-config-value">2G DDR4</div>
  </div>
  
  <div class="cart-config-item">
    <div class="cart-config-label">带宽</div>
    <div class="cart-config-value">20Mbps 峰值</div>
  </div>
  
  <div class="cart-config-item">
    <div class="cart-config-label">IPV4</div>
    <div class="cart-config-value">1个/5G防御</div>
  </div>
  
  <div class="cart-config-item">
    <div class="cart-config-label">系统盘</div>
    <div class="cart-config-value">50G SSD</div>
  </div>
  
  <div class="cart-config-item">
    <div class="cart-config-label">数据盘</div>
    <div class="cart-config-value">弹性 Raid10</div>
  </div>
</div>
<hr>

<div class="cart-tags-container">
  <span class="cart-tag">精品线路</span>
  <span class="cart-tag">延迟优秀</span>
  <span class="cart-tag">极速稳定</span>
</div>

样式二

CSS代码：

table.tftable {
            font-size: 15px;
            color: #000;
            width: 100%;
            border-width: 0px;
            border-color: #729ea5;
            border-collapse: collapse;
        }

        table.tftable td {
            font-size: 15px;
            border-width: 0px;
            padding: 4px;
            border-style: solid;
            border-color: #729ea5;
        }

       .yswac_bq {
            background-color: rgba(252, 241, 235, 1);
            color: rgba(254, 95, 71, 1)!important;
            margin-right: 2px;
            min-width: max-content;
            padding: 0 8px;
            height: 24px;
            line-height: 24px!important;
            font-size: 12px!important;
            font-weight: bold;
            border-radius: 2px;
            display: inline-block;
            margin-bottom: 8px;
        }

       .product-card.product-Parameters.buy-now-button {
            margin: 12px 20px 20px;
            width: auto;
        }

       .product-card.product-card-body.product-description {
            line-height: 2;
        }

       .yswac_adv {
            display: inline-block;
            padding-left: 3px;
            padding-right: 3px;
            border: 1px solid;
            font-size: 12px!important;
            font-style: normal;
            line-height: 16px!important;
            border-radius: 2px;
            border-color: #0008ff;
            background: #fff;
            color: #0008ff!important;
            position: relative;
            float: right;
            margin-top: 5px;
        }

商品介绍：

CPU：1C <font color="#77cce9">100%性能</font></b><span class="yswac_adv">E5-2697V4</span></strong></li><br>
内存：1G <font color="#77cce9">DDR4 </font></strong></li><br>
硬盘：30G <font color="#77cce9">Raid 10阵列</font></strong></li><br>
带宽：100Mbps <font color="#77cce9">峰值</font></strong></li><br>
流量：300G <font color="#77cce9">次月重置</font></strong></li><br>
IPV4：1个+V6 <font color="#77cce9">5G防御</font></strong></li><br>
备份： 赠送快照/备份<br>
</a></strong><bt><hr>      
                <div class="yswac_bq">国际优化</div>
                <div class="yswac_bq">超大带宽</div>
                <div class="yswac_bq">稳定极速</div>
            </td>
        </tr>
    </table>

速科模板购物车圆角美化

28天前

0636