vue商城项目学习实战第二篇

最新推荐文章于 2024-05-27 18:55:13 发布

慕古月

最新推荐文章于 2024-05-27 18:55:13 发布

阅读量331

点赞数 7

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/qq_27975799/article/details/136680563

版权

1、商城中间body部门代码实现，我们可以单独创建一个新的组件Home.vue，div标签中引入版心类，这样版心都是1200；具体实现如下图

1.1、tabBar部分代码

        <div class="tabBar">
            <div class="tab">
                <a href="#">首页</a></div>
            <div class="phone">
                <span>></span>
                <div><a href="#">手机</a></div>
            </div>
        </div>

1.2、tabList部分代码

        <div class="tabList">
            <div class="classifyPhone">
                <div class="classify">分类 ：</div>
                <div class="phoneList">
                    <div class="box">
                        <span><a href="#">手机</a></span>
                    </div>
                    <div class="box">
                        <span><a href="#">畅享系列</a></span>
                    </div>
                    <div class="box">
                        <span><a href="#">nova系列</a></span>
                    </div>
                    <div class="box">
                        <span><a href="#">P系列</a></span>
                    </div>
                    <div class="box">
                        <span><a href="#">Mate系列</a></span>
                    </div>
                    <div class="box">
                        <span><a href="#">二手机</a></span>
                    </div>
                    <div class="box">
                        <span><a href="#">华为官方翻新</a></span>
                    </div>
                    <div class="box">
                        <span><a href="#">Pocket系列</a></span>
                    </div>
                    <div class="moreInfo">
                        <div>更多</div>
                        <div>
                            <img src="https://res.vmallres.com/portal/1.24.2.300.Re.20240204175745/h5/images/icon-open.png">
                        </div>
                    </div>
                </div>
            </div>
            <div class="classifyService">
                <div class="service">服务优惠 ：</div>
                <div class="available">仅看有货</div>
            </div>
            <div class="classifyProvide">
                <div class="orderTitle">排序 ：</div>
                <div class="queryItem">
                    <div class="comprehensive"> <a href="#">综合</a></div>
                    <div class="new"> <a href="#">最新</a></div>
                    <div class="comments"> <a href="#">评论数</a></div>
                    <div class="price">
                        <div class="priceText">价格</div>
                        <div class="inputPrice">
                            <div class="priceOne">
                                <div class="tag">¥</div>
                                <input type="text">
                            </div>
                            <div>-</div>
                            <div class="priceTwo">
                                <div class="tag">¥</div>
                                <input type="text">
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>

1.3、productList部分代码

        <div class="productList">
            <div class="box">
                <div class="productImage">
                    <div class="phoneImage">
                        <img src="https://res.vmallres.com/pimages/uomcdn/CN/pms/202402/gbom/6942103116261/800_800_13C707C7E44C89BAC152465D56B3417Emp.png"/>
                    </div>
                </div>
                <div class="productDetail">
                    <div class="ptext">
                        <div class="pTitle">
                            <div class="newPro">
                                <span>新品</span>
                            </div>
                            HUAWEI Pocket 2
                        </div>
                        <div class="detail otw">
                            超平整超可靠，全焦段XMAGE四摄，紫外防晒检测
                        </div>
                        <div class="Ttag">
                            <div class="Tscore">赠积分</div>
                        </div>
                    </div>
                    <div class="sumPrice">
                        <div class="pp">
                            <div class="pprice">
                                <div class="money">¥8999</div>
                            </div>
                            <div class="pcommet">
                                <div class="personCommet">2605人评价</div>
                                <div class="goodCommet">99%好评</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="productImage">
                    <div class="phoneImage">
                        <img src="https://res.vmallres.com/pimages/uomcdn/CN/pms/202402/gbom/6942103115608/800_800_4B8E8433B2D271853979CD701B88580Dmp.png"/>
                    </div>
                </div>
                <div class="productDetail">
                    <div class="ptext">
                        <div class="pTitle">
                            <div class="newPro">
                                <span>新品</span>
                            </div>
                            华为畅享 70z
                        </div>
                        <div class="detail otw">
                            6000mAh大电池 长续航，HarmonyOS 4 流畅安全，6.75英寸护眼大屏
                        </div>
                        <div class="Ttag2">
                            <div class="Tmin">限时直降100元</div>
                            <div class="Tscore2">赠积分</div>
                        </div>
                    </div>
                    <div class="sumPrice">
                        <div class="pp">
                            <div class="pprice">
                                <div class="money">¥1299</div>
                            </div>
                            <div class="pcommet">
                                <div class="personCommet">549人评价</div>
                                <div class="goodCommet">99%好评</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="productImage">
                    <div class="phoneImage">
                        <img src="https://res.vmallres.com/pimages/uomcdn/CN/pms/202312/gbom/6942103112119/800_800_6C345C873DBC15A1005E79E1D4B6645Amp.png"/>
                    </div>
                </div>
                <div class="productDetail">
                    <div class="ptext">
                        <div class="pTitle">
                            <div class="newPro">
                                <span>新品</span>
                            </div>
                            nova 12 Pro
                        </div>
                        <div class="detail otw">
                            前置6000万人像追焦双摄，鸿蒙智慧通信，物理可变光圈
                        </div>
                        <div class="Ttag">
                            <div class="Tscore">赠积分</div>
                        </div>
                    </div>
                    <div class="sumPrice">
                        <div class="pp">
                            <div class="pprice">
                                <div class="money">¥4399</div>
                            </div>
                            <div class="pcommet">
                                <div class="personCommet">3212人评价</div>
                                <div class="goodCommet">98%好评</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="productImage">
                    <div class="phoneImage">
                        <img src="https://res.vmallres.com/pimages/uomcdn/CN/pms/202401/gbom/6942103111051/800_800_9251FDF9C7662C424900489AB1C88F2Amp.png"/>
                    </div>
                </div>
                <div class="productDetail">
                    <div class="ptext">
                        <div class="pTitle">
                            <div class="newPro">
                                <span>新品</span>
                            </div>
                            华为畅享 70 Pro
                        </div>
                        <div class="detail otw">
                            1亿像素超清影像，HarmonyOS 4，5000mAh大电池 长续航
                        </div>
                        <div class="Ttag">
                            <div class="Tscore">赠积分</div>
                        </div>
                    </div>
                    <div class="sumPrice">
                        <div class="pp">
                            <div class="pprice">
                                <div class="money">¥1699</div>
                            </div>
                            <div class="pcommet">
                                <div class="personCommet">1638人评价</div>
                                <div class="goodCommet">96%好评</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="productImage">
                    <div class="phoneImage">
                        <img src="https://res.vmallres.com/pimages/uomcdn/CN/pms/202312/gbom/6942103114014/800_800_DACD4B8DD7D6127ED11DD9CC871597A7mp.png"/>
                    </div>
                </div>
                <div class="productDetail">
                    <div class="ptext">
                        <div class="pTitle">
                            <div class="newPro">
                                <span>新品</span>
                            </div>
                            nova 12
                        </div>
                        <div class="detail otw">
                            鸿蒙智慧通信，100W智能快充Turbo，前置6000万4K超广角人像
                        </div>
                        <div class="Ttag">
                            <div class="Tscore">赠积分</div>
                        </div>
                    </div>
                    <div class="sumPrice">
                        <div class="pp">
                            <div class="pprice">
                                <div class="money">¥3399</div>
                            </div>
                            <div class="pcommet">
                                <div class="personCommet">6335人评价</div>
                                <div class="goodCommet">98%好评</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="productImage">
                    <div class="phoneImage">
                        <img src="https://res.vmallres.com/pimages/uomcdn/CN/pms/202312/gbom/6942103114670/800_800_C2617EA437BD279D14CA8177889EB971mp.png"/>
                    </div>
                </div>
                <div class="productDetail">
                    <div class="ptext">
                        <div class="pTitle">
                            <div class="newPro">
                                <span>新品</span>
                            </div>
                            nova 12 活力版
                        </div>
                        <div class="detail otw">
                            6.88mm超薄潮美直屏，前置6000万超广角拍照，后置5000万超感知影像
                        </div>
                        <div class="Ttag">
                            <div class="Tscore">赠积分</div>
                            <!-- <div class="Tminc">限时赠</div> -->
                        </div>
                    </div>
                    <div class="sumPrice">
                        <div class="pp">
                            <div class="pprice">
                                <div class="money">¥2499</div>
                            </div>
                            <div class="pcommet">
                                <div class="personCommet">1960人评价</div>
                                <div class="goodCommet">97%好评</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="productImage">
                    <div class="phoneImage">
                        <img src="https://res.vmallres.com/pimages/uomcdn/CN/pms/202312/gbom/6942103115943/800_800_0B6CE4EB0153397441136CB224C26D4Bmp.png"/>
                    </div>
                </div>
                <div class="productDetail">
                    <div class="ptext">
                        <div class="pTitle">
                            <div class="newPro">
                                <span>新品</span>
                            </div>
                            nova 12 Ultra
                        </div>
                        <div class="detail otw">
                            前置6000万人像追焦双摄，鸿蒙智慧通信，物理可变光圈
                        </div>
                        <div class="Ttag">
                            <div class="Tscore">赠积分</div>
                        </div>
                    </div>
                    <div class="sumPrice">
                        <div class="pp">
                            <div class="pprice">
                                <div class="money">¥4699</div>
                            </div>
                            <div class="pcommet">
                                <div class="personCommet">1393人评价</div>
                                <div class="goodCommet">97%好评</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="productImage">
                    <div class="phoneImage">
                        <img src="https://res.vmallres.com/pimages/uomcdn/CN/pms/202403/gbom/6942103107719/800_800_5818B6A12914274ED24FB8FE47F1CD34mp.png"/>
                    </div>
                </div>
                <div class="productDetail">
                    <div class="ptext">
                        <div class="pTitle">
                            <div class="newPro">
                                <span>价保318</span>
                            </div>
                            Mate 60
                        </div>
                        <div class="detail otw">
                            超可靠玄武架构，全焦段超清影像，超强灵犀通信，双向北斗卫星消息
                        </div>
                        <div class="Ttag">
                            <div class="Tscore">赠积分</div>
                        </div>
                    </div>
                    <div class="sumPrice">
                        <div class="pp">
                            <div class="pprice">
                                <div class="money">¥5999</div>
                            </div>
                            <div class="pcommet">
                                <div class="personCommet">30548人评价</div>
                                <div class="goodCommet">99%好评</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

以上就是body部分代码实现

2、body代码应用样式，样式也分为以下几部分

2.1、tabBar部分代码

/* home tabBar页 */
.tabBar {
  height: 65px;
  width: auto;
  display: flex;
}

.tabBar .tab {
  line-height: 65px;
  font-size: 12px;
  /* color: rgb(155, 150, 150); */
}

.tabBar .tab a {
  line-height: 65px;
  font-size: 12px;
  color: rgb(155, 150, 150);
}

.tabBar .phone {
  display: flex;
  line-height: 65px;
  font-size: 12px;
}

2.2、tabList部分代码

/* home tabList页 */
.tabList {
  height: 150px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.tabList .classifyPhone {
  display: flex;
  justify-content: space-around;
}

.tabList .classifyPhone .classify {
  font-size: 12px;
  flex: 0.6;
  width: 104px;
  height: 48px;
  color: rgb(155, 150, 150);
  padding-left: 24px;
  line-height: 48px;
}

.tabList .classifyPhone .phoneList {
  display: flex;
  justify-content: space-between;
  flex: 5;
  font-size: 12px;
  line-height: 48px;
}

.tabList .classifyPhone .phoneList .box {
  width: 104px;
  height: 48px;
  font-size: 12px;
}

.tabList .classifyPhone .phoneList .moreInfo {
  display: flex;
  font-size: 12px;
  margin-right: 40px;
}

.tabList .classifyService {
  display: flex;
}

.tabList .classifyService .service {
  flex: 0.6;
  font-size: 12px;
  color: rgb(155, 150, 150);
  padding-left: 24px;
  height: 48px;
  line-height: 48px;
}

.tabList .classifyService .available {
  flex: 5;
  font-size: 12px;
  height: 48px;
  line-height: 48px;
}

.tabList .classifyProvide {
  display: flex;
  font-size: 12px;
  justify-content: space-between;
}

.tabList .classifyProvide .orderTitle {
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  color: rgb(155, 150, 150);
  padding-left: 24px;
  height: 48px;
  flex: 0.6;
  line-height: 48px;
}

.tabList .classifyProvide .queryItem {
  display: flex;
  flex: 5;
  justify-content: flex-start;
  line-height: 48px;
}

.tabList .classifyProvide .comprehensive {
  width: 112px;
  height: 48px;
  line-height: 48px;
}

.tabList .classifyProvide .new {
  width: 112px;
  height: 48px;
  line-height: 48px;
}

.tabList .classifyProvide .comments {
  width: 112px;
  height: 48px;
  line-height: 48px;
}

.tabList .classifyProvide .queryItem .price {
  display: flex;
  height: 48px;
  justify-content: flex-start;
  flex-direction: row;
}

.tabList .classifyProvide .queryItem .priceText {
  height: 48px;
  /* width: 168px; */
  font-size: 12px;
}

.tabList .classifyProvide .queryItem .inputPrice {
  display: flex;
}

.tabList .classifyProvide .price .priceOne {
  display: flex;
  flex-direction: row;
}

.tabList .classifyProvide .price .priceOne .tag {
  display: inline;
  padding-left: 5px;
}

.tabList .classifyProvide .price input {
  width: 68px;
  height: 20px;
  margin-top: 12px;
}

input[type=text]:focus {
  outline: none;
}

.tabList .classifyProvide .price .priceTwo {
  display: flex;
  flex-direction: row;
}

2.3、productList部分代码

/* 手机产品 */
.productList {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 30px;
  margin-bottom: 50px;
}

.productList .box {
  width: 291px;
  height: 410px;
  border: 1px solid ghostwhite;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-bottom: 10px;
}

.productList .box .productImage {
  width: 291px;
  height: 254px;
}

.productList .box .productImage .phoneImage img {
  width: 180px;
  height: 192px;
  margin: 21px 21px 55px 55px;
}

.productList .box .productDetail {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 291px;
  height: 156px;
}

.productList .box .productDetail .ptext {
  display: flex;
  flex-direction: column;
}

.productList .box .productDetail .ptext .pTitle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 16px;
}

.productList .box .productDetail .ptext .pTitle .newPro {
  text-align: center;
  margin-right: 5px;
  border-radius: 5px;
}

.productList .box .productDetail .ptext .pTitle span {
  font-size: 12px;
  color: white;
  background-color: red;
  border-radius: 5px;
  padding: 0px 3px;
  line-height: 19px;

}

.productList .box .productDetail .ptext .detail {
  font-size: 13px;
  color: rgb(155, 150, 150);
  text-align: center;
  padding: 5px 5px 24px 24px;
  height: 18px;
}

.productList .box .productDetail .ptext .Ttag {
  display: flex;
  width: 50px;
  height: 17px;
  justify-content: center;
  margin-left: 120px;
}

.productList .box .productDetail .ptext .Ttag .Tscore {
  font-size: 12px;
  border: 1px solid black;
  width: 44px;
  height: 16px;
  text-align: center;
  border-radius: 5px;
}

.productList .box .productDetail .ptext .Ttag2 {
  display: flex;
  width: 151px;
  height: 34px;
  justify-content: center;
  margin-left: 70px;
}

.productList .box .productDetail .ptext .Ttag2 .Tscore2 {
  font-size: 12px;
  border: 1px solid black;
  width: 44px;
  height: 16px;
  text-align: center;
  border-radius: 5px;
}

.productList .box .productDetail .ptext .Ttag2 .Tmin {
  font-size: 12px;
  border: 1px solid black;
  width: 84px;
  height: 16px;
  text-align: center;
  border-radius: 5px;
  margin-right: 5px;
  color: red;
}

.productList .box .productDetail .sumPrice {
  display: flex;
  flex-direction: column;
}

.productList .box .productDetail .sumPrice .pp {
  display: flex;
  flex-direction: column;
}

.productList .box .productDetail .sumPrice .pp .pprice {
  display: flex;
}

.productList .box .productDetail .sumPrice .pp .pprice .money {
  font-size: 16px;
  justify-content: center;
  margin-bottom: 5px;
  margin-left: 120px;
}

.productList .box .productDetail .sumPrice .pp .pcommet {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.productList .box .productDetail .sumPrice .pp .pcommet .personCommet {
  font-size: 12px;
  color: rgb(155, 150, 150);
  margin-right: 8px;
}

.productList .box .productDetail .sumPrice .pp .pcommet .goodCommet {
  font-size: 12px;
  color: rgb(155, 150, 150);
}

以上是body部分所有样式

3、Home.vue组件挂到根组件APP.vue下面

<template>
  <div>
    <Header></Header>
    <Home></Home>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Home from './components/Home.vue'

export default {
  name: 'App',
  components: {
    Header,Home
  }
}
</script>

运行npm run serve 可看见body部分效果

慕古月

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
vue商城项目学习实战第二篇

1、商城中间body部门代码实现，我们可以单独创建一个新的组件Home.vue，div标签中引入版心类，这样版心都是1200；3、Home.vue组件挂到根组件APP.vue下面。2、body代码应用样式，样式也分为以下几部分。1.3、productList部分代码。2.3、productList部分代码。1.2、tabList部分代码。2.2、tabList部分代码。1.1、tabBar部分代码。以上就是body部分代码实现。2.1、tabBar部分代码。以上是body部分所有样式。
复制链接

扫一扫