Skip to content

C
CFFP-HB
Commit fe8a6a77 by yuzhenWang
Options

调整适配4

parent 1f16eeb1
Showing with 317 additions and 412 deletions
pages/index/index.vue
......@@ -629,166 +629,164 @@
}
}
.productBox{
background-color: #fff;
margin-top: 15rpx;
box-sizing: border-box;
margin-bottom: 100rpx;
.productTitle{
border-bottom: 1rpx solid rgba(238, 238, 238, 1);
padding-bottom: 10rpx;
.titleTxt{
padding: 15rpx 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.more{
font-size: 26rpx;
color: rgba(84, 84, 84, 1);
.icon-youjiantou{
font-size: 26rpx;
}
}
}
/* 基础样式 - 移动端优先 */
.productList {
width: 100%;
box-sizing: border-box;
.productBox {
background-color: #fff;
margin-top: 15rpx;
box-sizing: border-box;
margin-bottom: 100rpx;
.productTitle {
border-bottom: 1rpx solid rgba(238, 238, 238, 1);
padding-bottom: 10rpx;
.titleTxt {
padding: 15rpx 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.more {
font-size: 26rpx;
color: rgba(84, 84, 84, 1);
.icon-youjiantou {
font-size: 26rpx;
}
}
}
.productList {
width: 100%;
box-sizing: border-box;
.productListBox {
padding: 30rpx;
display: grid;
grid-template-columns: repeat(2, 1fr); /* 默认两列 */
gap: 30rpx; /* 间隙 */
.productListItem {
width: 100%; /* 使用grid布局后宽度自动控制 */
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
.top {
width: 100%;
position: relative;
border-radius: 20rpx;
overflow: hidden;
/* 确保图片容器有固定宽高比 */
&::before {
content: "";
display: block;
padding-top: 100%; /* 1:1 宽高比 */
}
.productImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.productDesBox {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 5rpx 10rpx 10rpx 10rpx;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.1);
border-radius: 0 0 20rpx 20rpx;
font-size: 24rpx;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 2; /* 关键修改：显示2行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* 移除 white-space: nowrap */
line-height: 1.4; /* 可选：调整行高，使两行更美观 */
}
}
.bottom {
width: 100%;
box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx;
margin-bottom: 5rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.two {
display: flex;
justify-content: space-between;
align-items: center;
.price {
font-size: 28rpx;
color: rgba(32, 39, 155, 1);
}
.num {
font-size: 24rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
/* iPad竖屏和小屏幕平板 */
@media (min-width: 768px) and (max-width: 1023px) {
.productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */
gap: 30rpx;
.productListBox {
padding: 30rpx 30rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 30rpx;
.productListItem {
width: calc(50% - 20rpx); /* 两列布局，考虑间隙 */
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
.top {
width: 100%;
position: relative;
border-radius: 20rpx;
overflow: hidden;
/* 确保图片容器有固定宽高比 */
&::before {
content: "";
display: block;
padding-top: 100%; /* 1:1 宽高比 */
}
.productImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.productDesBox {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 5rpx 10rpx 10rpx 10rpx;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.1);
border-radius: 0 0 20rpx 20rpx;
font-size: 24rpx;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.bottom {
width: 100%;
box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx;
margin-bottom: 5rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.two {
display: flex;
justify-content: space-between;
align-items: center;
.price{
font-size: 28rpx;
color: rgba(32, 39, 155, 1);
}
.num{
font-size: 24rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
@media (min-width: 768px) {
.productList {
.productListBox {
justify-content: flex-start;
gap: 40rpx;
/* 添加以下两行确保换行和均匀分布 */
display: flex;
flex-wrap: wrap;
.productListItem {
width: calc((100% - 80rpx) / 3); /* 40rpx = 20rpx * 2（左右间隙） */
.top{
.productDesBox{
padding: 10rpx 20rpx 20rpx 20rpx;
border-radius: 0 0 40rpx 40rpx;
}
}
.bottom {
.two {
.price {
font-size: 23rpx;
color: rgba(32, 39, 155, 1);
}
.num {
font-size: 20rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
}
.productEmpty{
color: rgba(166, 166, 166, 1);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx 0;
font-size: 28rpx;
}
}
}
/* iPad横屏和大屏幕平板 */
@media (min-width: 1024px) and (max-width: 1279px) {
.productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */
gap: 30rpx;
}
}
/* 电脑端 */
@media (min-width: 1280px) {
.productList .productListBox {
grid-template-columns: repeat(4, 1fr); /* 四列 */
gap: 30rpx;
}
}
.productEmpty {
color: rgba(166, 166, 166, 1);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx 0;
font-size: 28rpx;
}
}
.joinContent{
width: 500rpx;
......
pages/orderStatus/orderStatus.vue
......@@ -165,258 +165,165 @@
<style lang="scss" scoped>
.container{
padding-bottom: 50rpx;
.productBox{
background-color: #fff;
margin-top: 15rpx;
box-sizing: border-box;
margin-bottom: 100rpx;
.productTitle{
border-bottom: 1rpx solid rgba(238, 238, 238, 1);
padding-bottom: 10rpx;
.titleTxt{
padding: 15rpx 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.more{
font-size: 26rpx;
color: rgba(84, 84, 84, 1);
.icon-youjiantou{
font-size: 26rpx;
}
}
}
/* 基础样式 - 移动端优先 */
.productList {
width: 100%;
box-sizing: border-box;
.productListBox {
padding: 30rpx 30rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 30rpx;
.productListItem {
width: calc(50% - 20rpx); /* 两列布局，考虑间隙 */
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
.top {
width: 100%;
position: relative;
border-radius: 20rpx;
overflow: hidden;
/* 确保图片容器有固定宽高比 */
&::before {
content: "";
display: block;
padding-top: 100%; /* 1:1 宽高比 */
}
.productImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.productDesBox {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 5rpx 10rpx 10rpx 10rpx;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.1);
border-radius: 0 0 20rpx 20rpx;
font-size: 24rpx;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.bottom {
width: 100%;
box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx;
margin-bottom: 5rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.two {
display: flex;
justify-content: space-between;
align-items: center;
.price{
font-size: 28rpx;
color: rgba(32, 39, 155, 1);
}
.num{
font-size: 24rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
/* 平板设备 (768px 以上) */
@media (min-width: 768px) {
.productList {
.productListBox {
justify-content: flex-start;
gap: 40rpx;
/* 添加以下两行确保换行和均匀分布 */
display: flex;
flex-wrap: wrap;
.productListItem {
width: calc((100% - 80rpx) / 3); /* 40rpx = 20rpx * 2（左右间隙） */
.top{
.productDesBox{
padding: 10rpx 20rpx 20rpx 20rpx;
border-radius: 0 0 40rpx 40rpx;
}
}
.bottom {
.two {
.price {
font-size: 23rpx;
color: rgba(32, 39, 155, 1);
}
.num {
font-size: 20rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
}
.productEmpty{
color: rgba(166, 166, 166, 1);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx 0;
font-size: 28rpx;
}
}
}
.ulBox{
flex-direction: column;
}
.liBox{
background-color: #fff;
border-radius: 20rpx;
margin-bottom: 10rpx;
padding: 10rpx;
}
.statusBox{
padding: 30rpx 0;
background-color: #fff;
margin-bottom: 10rpx;
.successBox{
display: flex;
flex-direction: column;
align-items: center;
.statusText{
color: #20279B;
font-size: 36rpx;
}
.viewOrder{
color: #fff;
font-size: 30rpx;
margin-top: 30rpx;
background-color: #20279B;
padding: 10rpx 20rpx;
border-radius: 40rpx;
}
.iconfont{
margin-bottom: 30rpx;
font-size: 100rpx;
color: #20279B;
}
}
.failBox{
display: flex;
flex-direction: column;
align-items: center;
.iconfont{
border: 1px solid #F15A1F;
padding: 12rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.optionBox{
display: flex;
justify-content: center;
margin-top: 60rpx;
text{
border-radius: 40rpx;
background-color: #20279B;
color: #fff;
font-size: 30rpx;
padding: 10rpx 50rpx;
margin-right: 20rpx;
&:first-child{
background-color: transparent;
color: #20279B;
border: 1px solid #20279B;
}
}
}
}
.productBox {
background-color: #fff;
margin-top: 15rpx;
box-sizing: border-box;
margin-bottom: 100rpx;
.productTitle {
border-bottom: 1rpx solid rgba(238, 238, 238, 1);
padding-bottom: 10rpx;
.titleTxt {
padding: 15rpx 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.more {
font-size: 26rpx;
color: rgba(84, 84, 84, 1);
.icon-youjiantou {
font-size: 26rpx;
}
}
}
.productList {
width: 100%;
box-sizing: border-box;
.productListBox {
padding: 30rpx;
display: grid;
grid-template-columns: repeat(2, 1fr); /* 默认两列 */
gap: 30rpx; /* 间隙 */
.productListItem {
width: 100%; /* 使用grid布局后宽度自动控制 */
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
.top {
width: 100%;
position: relative;
border-radius: 20rpx;
overflow: hidden;
/* 确保图片容器有固定宽高比 */
&::before {
content: "";
display: block;
padding-top: 100%; /* 1:1 宽高比 */
}
.productImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.productDesBox {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 5rpx 10rpx 10rpx 10rpx;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.1);
border-radius: 0 0 20rpx 20rpx;
font-size: 24rpx;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 2; /* 关键修改：显示2行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* 移除 white-space: nowrap */
line-height: 1.4; /* 可选：调整行高，使两行更美观 */
}
}
.bottom {
width: 100%;
box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx;
margin-bottom: 5rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.two {
display: flex;
justify-content: space-between;
align-items: center;
.price {
font-size: 28rpx;
color: rgba(32, 39, 155, 1);
}
.num {
font-size: 24rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
/* iPad竖屏和小屏幕平板 */
@media (min-width: 768px) and (max-width: 1023px) {
.productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */
gap: 30rpx;
}
}
/* iPad横屏和大屏幕平板 */
@media (min-width: 1024px) and (max-width: 1279px) {
.productList .productListBox {
grid-template-columns: repeat(3, 1fr); /* 三列 */
gap: 30rpx;
}
}
/* 电脑端 */
@media (min-width: 1280px) {
.productList .productListBox {
grid-template-columns: repeat(4, 1fr); /* 四列 */
gap: 30rpx;
}
}
.productEmpty {
color: rgba(166, 166, 166, 1);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx 0;
font-size: 28rpx;
}
}
.course_content{
background: #fff;
position: relative;
padding: 0 30rpx 100rpx 30rpx;
.tag{
padding: 20rpx;
display: flex;
justify-content: space-between;
h4{
// margin-left: 20rpx;
}
}
.tag:before{
position: absolute;
left: 20rpx;
top: 20rpx;
display: inline-block;
content: '';
width: 2px;
height: 16px;
background-color: #F15A1F;
border-radius: 2px;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment