Blame view
unpackage/dist/dev/mp-weixin/pages/index/index.wxss
5.24 KB
c41ff77d3
首页页面搭建
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@charset "UTF-8"; /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 * * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ |
|
a2408fc3f
init
|
27 |
.content {
|
|
c41ff77d3
首页页面搭建
|
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
background-color: #F7F6F6;
}
.header {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
background-color: #F7F6F6;
height: 178rpx;
width: 100%;
z-index: 999;
position: fixed;
top: 0;
|
|
a2408fc3f
init
|
63 64 |
}
.searchBar {
|
|
c41ff77d3
首页页面搭建
|
65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
width: 670rpx;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: fixed;
top: 0;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0rpx 16rpx;
border: 1px solid #FF6B4A;
border-radius: 8rpx;
background-color: #ffffff;
|
|
a2408fc3f
init
|
83 84 |
}
.searchIpt {
|
|
c41ff77d3
首页页面搭建
|
85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 |
height: 68rpx;
width: 670rpx;
padding: 16rpx;
font-size: 28rpx;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.screenBar {
position: fixed;
top: 68rpx;
width: 670rpx;
height: 110rpx;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
color: #333333;
font-size: 32rpx;
}
.active {
color: #FF6B4A;
}
.screenItem {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.content-wrap {
width: 100%;
background-color: #FFFFFF;
}
.HMfilterDropdown {
position: fixed;
top: 178rpx !important;
}
.place {
background-color: #ffffff;
height: 266rpx;
}
.goods-list {
padding-top: 10px;
}
.goods-list .loading-text {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
height: 30px;
color: #979797;
font-size: 12px;
}
.goods-list .product-list {
width: 92%;
padding: 0 4% 3vw 4%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.goods-list .product-list .product {
width: 48%;
border-radius: 10px;
background-color: #fff;
margin: 0 0 7px 0;
-webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}
.goods-list .product-list .product image {
width: 100%;
border-radius: 10px 10px 0 0;
}
.goods-list .product-list .product .name {
width: 92%;
padding: 5px 4%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-align: justify;
overflow: hidden;
font-size: 15px;
}
.goods-list .product-list .product .info {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
width: 92%;
padding: 5px 4% 5px 4%;
}
.goods-list .product-list .product .info .price {
color: #e65339;
font-size: 15px;
font-weight: 600;
}
.goods-list .product-list .product .info .slogan {
color: #807c87;
font-size: 12px;
|
|
a2408fc3f
init
|
212 |
} |
|
a2408fc3f
init
|
213 |