.net core + vue商城界面

最新推荐文章于 2024-08-01 12:19:19 发布

太阳的后裔

最新推荐文章于 2024-08-01 12:19:19 发布

阅读量668

点赞数

分类专栏： .net core+vue

本文链接：https://blog.csdn.net/weixin_43942765/article/details/105907389

版权

.net core+vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<template>
    <div>
        <div class="product-search">
            <input type="text" id="txtSearch"/>
            <button>搜索</button>
        </div>
        <hr>
        <div class="product-list">
            <ul>
                <li>
                    <img src="/static/productimg/product2.jpg" alt="" />
                    <p class="p-price">&yen;5899.99</p>
                    <p>笔记本电脑</p>
                </li>
                <li>
                    <img src="/static/productimg/product2.jpg" alt="" />
                    <p class="p-price">&yen;5899.99</p>
                    <p>笔记本电脑</p>
                </li>
                <li>
                    <img src="/static/productimg/product2.jpg" alt="" />
                    <p class="p-price">&yen;5899.99</p>
                    <p>笔记本电脑</p>
                </li>
            </ul>
        </div>
    </div>
</template>
<style scoped>
/* :scoped 的作用是只对本页面的样式有效，不会影响其他页面 */
*{
    padding:0;
    margin:0;
}
.product-search{
    width:704px;
    height:44px;
    margin:auto;
}
#txtSearch{
    width:600px;
    height:32px;
    border:6px solid red;
    float:left;
    outline: none;
    padding:0 6px;
}
button{
    width:80px;
    height:44px;
    border:0 none;
    background-color: red;
    color:white;
    float:left;
    outline: none;
}
hr{
    border: 2px solid red;
    margin-top:60px;
}
.product-list{
    width:260px;
}
.product-list ul{
    height:900px;
    width:1000px;
    overflow:auto
}
.product-list li{
    width:260px;
    margin:60px 0 0 60px;
    list-style: none;
    float: left;
    border: 1px soild #fff;
    padding:6px;
}
.product-list li:hover{
    border-color: #eee;
    box-shadow: 0 0 6px #ccc;
}
.product-list li img{
    width:260px;
}
.product-list li p{
    text-align: left;
}
.p-price{
    font-size:18px;
    font-weight:bold;
    color: red;
    margin-bottom: 8px;
}
</style>