147 lines
3.4 KiB
CSS
147 lines
3.4 KiB
CSS
.button-container {
|
||
display: flex;
|
||
justify-content: center; /* 水平居中 */
|
||
}
|
||
.button-row{
|
||
width: 200px;
|
||
height: 60px;
|
||
}
|
||
.button-row-center{
|
||
width: 95%;
|
||
height: 100%;
|
||
box-shadow: 0px 2px 4px rgba(49, 49, 49, 0.2); /* 这里是阴影效果 */
|
||
font-size: 25px;
|
||
/* border: 3px solid rgba(47, 47, 47, 0.2); */
|
||
background-image: url('../../assets/headerBackgroungImg.png');
|
||
}
|
||
|
||
|
||
/*搜索 */
|
||
.input-select{
|
||
padding-top: 15px;
|
||
padding-bottom: 15px;
|
||
|
||
}
|
||
.input-select ::v-deep .el-input-group--append {
|
||
border: 1px solid rgba(138, 41, 36, 0.1);
|
||
box-shadow: 0px 2px 4px rgba(138, 41, 36, 0.2);
|
||
border-radius: 20px 0 0 20px;
|
||
}
|
||
.input-select ::v-deep .el-input__wrapper {
|
||
|
||
border-radius: 20px 0 0 20px;
|
||
}
|
||
|
||
.custom-border {
|
||
margin-bottom: 15px;
|
||
}
|
||
.custom-border ::v-deep .el-input__wrapper{
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(138, 41, 36, 0.2);
|
||
box-shadow: 0px 2px 4px rgba(138, 41, 36, 0.2); /* 这里是阴影效果 */
|
||
}
|
||
.card {
|
||
margin-bottom: 40px;
|
||
margin-right: 40px;
|
||
position: relative;
|
||
border-radius: 8px ;
|
||
|
||
}
|
||
.card-body{margin-left: 20px;}
|
||
.card:first-child {
|
||
margin-left: 20px; /* 调整第一个卡片的左边距 */
|
||
}
|
||
|
||
|
||
.card-header :hover{
|
||
cursor: pointer;
|
||
}
|
||
.card:hover{
|
||
box-shadow: 0px 2px 4px rgba(138, 41, 36, 0.8); /* 这里是阴影效果 */
|
||
}
|
||
.card-image {
|
||
width: 100%;
|
||
height: auto;
|
||
height: 280px; /* 调整图片高度 */
|
||
object-fit: cover; /* 保持图片比例并填充容器 */
|
||
border-radius: 20px 20px 0 0 ;
|
||
transition: transform 0.3s ease-in-out; /* 添加过渡效果 */
|
||
}
|
||
/* 当鼠标悬浮在包含图片的 .card 上时，图片会放大 */
|
||
.card:hover .card-image {
|
||
transform: scale(1.1); /* 放大比例，例如设置为原尺寸的110% */
|
||
}
|
||
/* 设置 .card-header 为相对定位容器 */
|
||
.card-header {
|
||
position: relative;
|
||
text-align: center;
|
||
|
||
overflow: hidden; /* 隐藏超出的部分 */
|
||
}
|
||
/* 设置 ewm-image 的样式 */
|
||
.ewm-image img {
|
||
object-fit: cover; /* 确保图片适应容器尺寸而不变形 */
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 80px;
|
||
height: 80px
|
||
}
|
||
|
||
.card-description {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
line-height: 1.4em; /* 调整行高，确保两行文本完整显示 */
|
||
color:rgb(130, 125, 125);
|
||
font-size: 14px; /* 替换为你想要的字体大小 */
|
||
margin-top: 10px; /* 上边距，替换为你想要的值 */
|
||
margin-bottom: 10px; /* 下边距，替换为你想要的值 */
|
||
margin-right: 10px;
|
||
}
|
||
|
||
|
||
/* 使用绝对定位将 "收藏" 和 "浏览" 放置在右下角 */
|
||
.side-bar {
|
||
align-items: center; /* 垂直居中 */
|
||
display: flex;
|
||
justify-content: flex-end; /* 将内容靠右对齐 */
|
||
margin-right: 10px;
|
||
color: rgb(167, 167, 167);
|
||
}
|
||
|
||
|
||
|
||
/*弹窗*/
|
||
.grid-text-title{
|
||
text-align: center; /* 这会让图片的内联元素沿水平方向居中 */
|
||
font-size: 24px;
|
||
}
|
||
.grid-text-title-img{
|
||
width: 300px;
|
||
height: 300px;
|
||
object-fit: cover; /* 确保图片填满容器且保持宽高比 */
|
||
|
||
}
|
||
.grid-text-title-img-wenyang{
|
||
width: 80%;
|
||
height: 80%;
|
||
object-fit: cover; /* 确保图片填满容器且保持宽高比 */
|
||
}
|
||
.grid-text-title-img-wenyang img{
|
||
margin-left: 10%;
|
||
}
|
||
dialog-xiahuaxian{
|
||
border-bottom: 1px solid black; /* 添加一条黑色、1像素宽度的下边框 */
|
||
}
|
||
|
||
dialog-neirong{
|
||
|
||
}
|
||
|
||
dialog-goumai{
|
||
margin-top: 2%;
|
||
margin-left: 35%;
|
||
} |