Skip to content

C
campSite
Commit 373b34ee authored by wuwangwolihui's avatar wuwangwolihui
Browse files
Options

营地2.0-公共修改样式

parent c3a42c5b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 291 additions and 424 deletions
src/assets/scss/active/activeList.scss 0 → 100644
View file @ 373b34ee
@-webkit-keyframes fade {
0% {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
opacity: 0
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
@keyframes fade {
0% {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
opacity: 0
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
.active-list {
margin-top: 30px;
display: flex;
flex-flow: wrap;
.active-list-item {
flex-basis: 31%;
margin: 1.75% 0;
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
opacity: 0;
-webkit-animation: fade ease-out 0.5s forwards;
animation: fade ease-out 0.5s forwards;
-webkit-animation-delay: .3s;
animation-delay: .3s;
&:nth-child(3n+2) {
margin: 1.75% 3.5%;
}
.inner {
border-radius: 4px;
overflow: hidden;
max-width: none;
background: #fff;
box-sizing: border-box;
transition: all ease-out 0.2s;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
.active-list-item-bg {
width: 100%;
height: 13.6vw;
min-height: 163px;
overflow: hidden;
background-color: #D8D8D8;
border-radius: 4px 4px 0px 0px;
::v-deep .el-image {
width: 100%;
height: 100%;
transition: all .5s;
-webkit-transition: all .5s;
.el-image__error {
background-color: #D8D8D8;
}
&:hover {
transform: scale(1.1);
-ms-transform: scale(1.1); /* IE 9 */
-moz-transform: scale(1.1); /* Firefox */
-webkit-transform: scale(1.1); /* Safari 和 Chrome */
-o-transform: scale(1.1);
}
}
}
.active-list-item-cont {
flex: 1;
padding: 10px 20px 0;
background-color: #ffffff;
border-radius: 0 0 4px 4px;
font-family: PingFang SC;
font-weight: 400;
.active-list-item-cont-header {
display: flex;
flex-flow: row;
align-items: center;
line-height: 28px;
margin: 0.8vw 0 0.4vw;
.label {
font-size: 12px;
> span {
padding: 5px 10px;
border-radius: 8px;
color: #ffffff;
background-color: var(--all_color);
margin-right: 5px;
}
}
.title {
font-size: 18px;
font-weight: 500;
}
}
.active-list-item-cont-txt1 {
font-size: 16px;
line-height: 28px;
margin: 0.4vw 0;
}
.active-list-item-cont-txt2 {
font-size: 14px;
color: #999999;
line-height: 24px;
margin: 0.4vw 0;
}
.active-list-item-cont-txt3 {
font-size: 15px;
color: #EC808D;
line-height: 28px;
margin: 0.4vw 0;
}
.active-list-item-cont-bottom {
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
border-top: 1px solid #cccccc;
margin-top: 1vw;
padding: 1vw 0;
font-size: 14px;
line-height: 32px;
cursor: pointer;
.el-icon-right {
font-size: 18px;
}
&:hover {
color: var(--all_color);
}
}
}
}
&:hover {
.inner {
box-shadow: 6px 6px 40px rgba(0, 0, 0, 0.08);
.active-list-item-bg {
::v-deep .el-image {
transform: scale(1.1);
-ms-transform: scale(1.1); /* IE 9 */
-moz-transform: scale(1.1); /* Firefox */
-webkit-transform: scale(1.1); /* Safari 和 Chrome */
-o-transform: scale(1.1);
}
}
}
}
}
}
src/views/base/active/Active.vue
View file @ 373b34ee
......@@ -249,35 +249,7 @@
<style lang="scss" scoped>
@import "a/scss/common";
@-webkit-keyframes fade {
0% {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
opacity: 0
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
@keyframes fade {
0% {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
opacity: 0
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
@import "a/scss/active/activeList";
.active-container {
padding: 50px;
color: #333333;
......@@ -396,160 +368,5 @@
}
}
.active-list {
margin-top: 30px;
display: flex;
flex-flow: wrap;
.active-list-item {
flex-basis: 31%;
margin: 1.75% 0;
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
opacity: 0;
-webkit-animation: fade ease-out 0.5s forwards;
animation: fade ease-out 0.5s forwards;
-webkit-animation-delay: .3s;
animation-delay: .3s;
&:nth-child(3n+2) {
margin: 1.75% 3.5%;
}
.inner {
border-radius: 4px;
overflow: hidden;
max-width: none;
background: #fff;
box-sizing: border-box;
transition: all ease-out 0.2s;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
.active-list-item-bg {
width: 100%;
height: 13.6vw;
min-height: 163px;
overflow: hidden;
background-color: #D8D8D8;
border-radius: 4px 4px 0px 0px;
::v-deep .el-image {
width: 100%;
height: 100%;
transition: all .5s;
-webkit-transition: all .5s;
.el-image__error {
background-color: #D8D8D8;
}
&:hover {
transform: scale(1.1);
-ms-transform: scale(1.1); /* IE 9 */
-moz-transform: scale(1.1); /* Firefox */
-webkit-transform: scale(1.1); /* Safari 和 Chrome */
-o-transform: scale(1.1);
}
}
}
.active-list-item-cont {
flex: 1;
padding: 10px 20px 0;
background-color: #ffffff;
border-radius: 0 0 4px 4px;
font-family: PingFang SC;
font-weight: 400;
.active-list-item-cont-header {
display: flex;
flex-flow: row;
align-items: center;
line-height: 28px;
margin: 0.8vw 0 0.4vw;
.label {
font-size: 12px;
> span {
padding: 5px 10px;
border-radius: 8px;
color: #ffffff;
background-color: var(--all_color);
margin-right: 5px;
}
}
.title {
font-size: 18px;
font-weight: 500;
}
}
.active-list-item-cont-txt1 {
font-size: 16px;
line-height: 28px;
margin: 0.4vw 0;
}
.active-list-item-cont-txt2 {
font-size: 14px;
color: #999999;
line-height: 24px;
margin: 0.4vw 0;
}
.active-list-item-cont-txt3 {
font-size: 15px;
color: #EC808D;
line-height: 28px;
margin: 0.4vw 0;
}
.active-list-item-cont-bottom {
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
border-top: 1px solid #cccccc;
margin-top: 1vw;
padding: 1vw 0;
font-size: 14px;
line-height: 32px;
cursor: pointer;
.el-icon-right {
font-size: 18px;
}
&:hover {
color: var(--all_color);
}
}
}
}
&:hover {
.inner {
box-shadow: 6px 6px 40px rgba(0, 0, 0, 0.08);
.active-list-item-bg {
::v-deep .el-image {
transform: scale(1.1);
-ms-transform: scale(1.1); /* IE 9 */
-moz-transform: scale(1.1); /* Firefox */
-webkit-transform: scale(1.1); /* Safari 和 Chrome */
-o-transform: scale(1.1);
}
}
}
}
}
}
}
</style>
src/views/base/home/Home.vue
View file @ 373b34ee
This diff is collapsed.
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