Init project
This commit is contained in:
lifizer
@@ -0,0 +1,293 @@
|
||||
@charset "UTF-8";
|
||||
/**
|
||||
*相关初始化
|
||||
*/
|
||||
|
||||
/*重置uni-checkbox样式开始*/
|
||||
uni-checkbox .uni-checkbox-input{
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
uni-checkbox .uni-checkbox-input:hover {
|
||||
border-color: #FE5261 !important;
|
||||
}
|
||||
|
||||
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{
|
||||
background-color: #FE5261 !important;
|
||||
border: 1px solid #FE5261 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
|
||||
checkbox .wx-checkbox-input {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
checkbox .wx-checkbox-input:hover {
|
||||
border-color: #FE5261 !important;
|
||||
}
|
||||
|
||||
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
|
||||
background-color: #FE5261 !important;
|
||||
border: 1px solid #FE5261 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/*重置uni-checkbox样式结束*/
|
||||
.font-color-lightred{
|
||||
color:#FE5261 !important;
|
||||
}
|
||||
|
||||
.font-color-white{
|
||||
color: #fff !important;
|
||||
}
|
||||
.font-color-red {
|
||||
color: #FE5261 !important;
|
||||
}
|
||||
.font-color-green{
|
||||
color: #00c17b !important;
|
||||
}
|
||||
|
||||
.bg-color-lightred{
|
||||
background-color:#FE5261 !important;
|
||||
}
|
||||
.bg-color-green{
|
||||
background-color: #00c17b !important;
|
||||
}
|
||||
.bg-color-red {
|
||||
background-color: #FE5261 !important;
|
||||
}
|
||||
.nav-bg-color-red{
|
||||
background-color: #FE5261 !important;
|
||||
}
|
||||
.icon-color {
|
||||
color: #FE5261;
|
||||
}
|
||||
.cart-color {
|
||||
color: #FE5261 !important;
|
||||
border: 1px solid #FE5261 !important;
|
||||
}
|
||||
/* padding20 */
|
||||
.padding20 {
|
||||
padding: 0.2*100rpx;
|
||||
}
|
||||
/* pad20 */
|
||||
.pad20 {
|
||||
padding: 0 0.2*100rpx;
|
||||
}
|
||||
/* padding30 */
|
||||
.padding30 {
|
||||
padding: 0.3*100rpx;
|
||||
}
|
||||
/*pad30 */
|
||||
.pad30 {
|
||||
padding: 0 0.3*100rpx;
|
||||
}
|
||||
/* layout */
|
||||
.acea-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* 辅助类 */
|
||||
}
|
||||
.acea-row.row-middle {
|
||||
align-items: center;
|
||||
}
|
||||
.acea-row.row-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.acea-row.row-bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.acea-row.row-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.acea-row.row-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.acea-row.row-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.acea-row.row-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.acea-row.row-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.acea-row.row-column-around {
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.acea-row.row-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.acea-row.row-column-between {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/* 上下左右垂直居中 */
|
||||
.acea-row.row-center-wrapper {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* 上下两边居中对齐 */
|
||||
.acea-row.row-between-wrapper {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 轮播图 */
|
||||
.slider-banner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
/* height:750rpx; */
|
||||
overflow: hidden;
|
||||
}
|
||||
.slider-banner{
|
||||
|
||||
}
|
||||
.slider-banner .swiper-container {
|
||||
height: 100%;
|
||||
}
|
||||
.slider-banner image{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.start {
|
||||
width: 1.22*100rpx;
|
||||
height: 0.3*100rpx;
|
||||
background-image: url("~@/static/images/start.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.22*100rpx auto;
|
||||
}
|
||||
.start.star5 {
|
||||
background-position: 0 0.03*100rpx;
|
||||
}
|
||||
.start.star4 {
|
||||
background-position: 0 -0.3*100rpx;
|
||||
}
|
||||
.start.star3 {
|
||||
background-position: 0 -0.7*100rpx;
|
||||
}
|
||||
.start.star2 {
|
||||
background-position: 0 -1.05*100rpx;
|
||||
}
|
||||
.start.star1 {
|
||||
background-position: 0 -1.4*100rpx;
|
||||
}
|
||||
.start.star0 {
|
||||
background-position: 0 -1.75*100rpx;
|
||||
}
|
||||
/* 单选框和多选框 */
|
||||
.checkbox-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.checkbox-wrapper input {
|
||||
display: none;
|
||||
}
|
||||
.checkbox-wrapper .icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
.checkbox-wrapper input:checked + .icon {
|
||||
background-color: #e93323;
|
||||
border-color: #e93323;
|
||||
background-image: url("/static/images/enter.png");
|
||||
background-size: 0.21*100rpx 0.15*100rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
.Loads {
|
||||
height: 0.8*100rpx;
|
||||
font-size: 0.25*100rpx;
|
||||
color: #000;
|
||||
}
|
||||
.Loads .iconfont {
|
||||
font-size: 0.3*100rpx;
|
||||
margin-right: 0.1*100rpx;
|
||||
height: 0.32*100rpx;
|
||||
line-height: 0.32*100rpx;
|
||||
}
|
||||
/*加载动画*/
|
||||
@keyframes load {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.loadingpic {
|
||||
animation: load 3s linear 1s infinite;
|
||||
}
|
||||
.loading {
|
||||
animation: load linear 1s infinite;
|
||||
}
|
||||
|
||||
.page-v4{
|
||||
background: #F5F5FA;
|
||||
}
|
||||
|
||||
.bold{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tc{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// flex布局
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.jc-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.jc-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.jc-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.jc-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.jc-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ai-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.ai-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.ai-center {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
.change-section {
|
||||
margin: 24rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.introduce {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.subInfo {
|
||||
margin-top: 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #8B8F99;
|
||||
}
|
||||
|
||||
.share {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.money {
|
||||
.num {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-section {
|
||||
margin: 24rpx;
|
||||
padding: 30rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.service-section {
|
||||
.cell {
|
||||
margin-bottom: 30rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
|
||||
.after-title {
|
||||
width: 120rpx;
|
||||
color: #ADADAD;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
position: relative;
|
||||
margin-top: 20rpx;
|
||||
color: #9D9D9D;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #9D9D9D;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #FF564A;
|
||||
}
|
||||
|
||||
.icon-time {
|
||||
position: relative;
|
||||
top: 6rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.cell:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.store-section {
|
||||
.logo {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 500rpx;
|
||||
color: #333;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #666;
|
||||
font-size: 22rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
margin-top: 30rpx;
|
||||
|
||||
.item {
|
||||
width: 198rpx;
|
||||
height: 318rpx;
|
||||
margin-right: 30rpx;
|
||||
|
||||
.cover-box {
|
||||
position: relative;
|
||||
width: 198rpx;
|
||||
height: 198rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.tag{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 92rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.cover{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.more-t {
|
||||
margin-top: 10rpx;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin-top: 10rpx;
|
||||
color: #DA0000;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.param-section {
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
|
||||
.table {
|
||||
margin-top: 30rpx;
|
||||
border: 2rpx solid #D2D2D2;
|
||||
|
||||
.row {
|
||||
border-bottom: 2rpx solid #D2D2D2;
|
||||
|
||||
.title {
|
||||
width: 160rpx;
|
||||
padding: 16rpx;
|
||||
border-right: 2rpx solid #D2D2D2;
|
||||
color: #ADADAD;
|
||||
}
|
||||
}
|
||||
.row:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
.value {
|
||||
width: 100%;
|
||||
padding: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
.u-form {
|
||||
margin-top: 8rpx;
|
||||
|
||||
.u-form-item__body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-cell-group {
|
||||
margin-bottom: 16rpx;
|
||||
padding: 40rpx 0;
|
||||
background: #FFFFFF;
|
||||
|
||||
.u-cell-group__title {
|
||||
padding-top: 0;
|
||||
|
||||
.u-cell-group__title__text {
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
line-height: 58rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-cell {
|
||||
.u-cell__body__content {
|
||||
flex: 0 !important;
|
||||
}
|
||||
|
||||
.u-cell__title {
|
||||
width: 216rpx !important;
|
||||
|
||||
.u-cell__title-text {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.u-text__value {
|
||||
width: 398rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #EF1C1C;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
.line {
|
||||
width: 690rpx;
|
||||
}
|
||||
|
||||
.u-textarea {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.area-item {
|
||||
.uni-input {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 750rpx;
|
||||
height: 80rpx;
|
||||
background: #FF564A;
|
||||
color: #FFFFFF;
|
||||
font-size: 36rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.btn-disabled {
|
||||
background: #DDDDDD;
|
||||
}
|
||||
|
||||
.btn-remove{
|
||||
background: #FF9696;
|
||||
}
|
||||
|
||||
.btn-upload {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 176rpx;
|
||||
height: 64rpx;
|
||||
border: 2rpx solid #1F77EE;
|
||||
border-radius: 32rpx;
|
||||
background: rgba(245, 245, 245, 0.39);
|
||||
color: #1F77EE;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.box-upload {
|
||||
//margin-top: 12rpx;
|
||||
|
||||
.img-preview {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 8rpx;
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
}
|
||||
|
||||
.pics-box {
|
||||
width: 690rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-upload__wrap{
|
||||
width: 690rpx;
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
width: 80vw;
|
||||
height: 80vh;
|
||||
padding: 30rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.content {
|
||||
height: 52vh;
|
||||
overflow-y: auto;
|
||||
margin: 30rpx 0;
|
||||
}
|
||||
|
||||
.agree-box {
|
||||
margin: 60rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.box-state {
|
||||
padding: 16rpx 32rpx 0;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
.pkg-product-list {
|
||||
image {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
width: 686rpx;
|
||||
height: 360rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 16rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 686rpx;
|
||||
height: 60rpx;
|
||||
margin: 0 auto;
|
||||
padding: 0 24rpx 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
background: #F7F7F7;
|
||||
border-radius: 30rpx;
|
||||
|
||||
input {
|
||||
width: 560rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.body-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
border-top: 2rpx solid #D2D2D2;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0 !important
|
||||
}
|
||||
|
||||
.aside-box {
|
||||
position: relative;
|
||||
left: 0;
|
||||
width: 194rpx;
|
||||
box-sizing: border-box;
|
||||
border-right: 2rpx solid #D2D2D2;
|
||||
overflow-y: auto;
|
||||
|
||||
.item {
|
||||
height: 94rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 2rpx solid #D2D2D2;
|
||||
color: #033333;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border-left: 6rpx solid #FD574B;
|
||||
color: #FD574B;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.article-box {
|
||||
position: relative;
|
||||
width: calc(100vw - 194rpx);
|
||||
overflow-y: auto;
|
||||
|
||||
.empty {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
image {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
color: gray;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
width: 242rpx;
|
||||
height: 376rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 20rpx 0 0 20rpx;
|
||||
|
||||
.cover {
|
||||
width: 242rpx;
|
||||
height: 242rpx;
|
||||
margin-bottom: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
position: absolute;
|
||||
bottom: 4rpx;
|
||||
color: #DA0000;
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
.item-store{
|
||||
height: 336rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
input{line-height: normal; box-sizing:border-box;}
|
||||
@font-face {
|
||||
font-family: 'GuildfordProBook 5';
|
||||
src: url('https://h5.yixiang.co/static/iconfont/GuildfordProBook5.otf');
|
||||
}
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
.iconfont{
|
||||
font-size: .36*100rpx;
|
||||
}
|
||||
/* 一像素边框 */
|
||||
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
|
||||
.border-1px::after {
|
||||
transform: scaleY(0.7);
|
||||
}
|
||||
.border-1px::before {
|
||||
transform: scaleY(0.7);
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
|
||||
.border-1px::after {
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.border-1px::before {
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
|
||||
.border-1px::after {
|
||||
transform: scaleY(0.33);
|
||||
}
|
||||
.border-1px::before {
|
||||
transform: scaleY(0.33);
|
||||
}
|
||||
}
|
||||
.line1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width: 100%;}
|
||||
.line2{word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
|
||||
.mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:55;background-color:rgba(0,0,0,0.5);}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
.fixed-share {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 200rpx;
|
||||
width: 184rpx;
|
||||
height: 62rpx;
|
||||
vertical-align: middle;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.box-share {
|
||||
.box-img {
|
||||
position: relative;
|
||||
width: 500rpx;
|
||||
height: 632rpx;
|
||||
border-radius: 40rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 22rpx;
|
||||
right: 22rpx;
|
||||
width: 32.5rpx;
|
||||
height: 32.5rpx;
|
||||
}
|
||||
|
||||
.main-img {
|
||||
width: 500rpx;
|
||||
height: 632rpx;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 500rpx;
|
||||
height: 100rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user