Skip to content

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

营地2.0-公共修改样式

parent c3a42c5b
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 @@ ...@@ -249,35 +249,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "a/scss/common"; @import "a/scss/common";
@import "a/scss/active/activeList";
@-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-container { .active-container {
padding: 50px; padding: 50px;
color: #333333; color: #333333;
...@@ -396,160 +368,5 @@ ...@@ -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> </style>
src/views/base/home/Home.vue
View file @ 373b34ee
...@@ -14,24 +14,28 @@ ...@@ -14,24 +14,28 @@
热门活动 热门活动
</div> </div>
<div class="active-list"> <div class="active-list">
<div :key="index" :style="{ <div class="active-list-item" v-for="(item, index) in activeList" :key="index"
:style="{
'-webkit-animation-delay': (index+1)*0.1+'s', '-webkit-animation-delay': (index+1)*0.1+'s',
'imation-delay': (index+1)*0.1+'s', 'imation-delay': (index+1)*0.1+'s',
}" class="active-list-item" }">
v-for="(item, index) in activeList">
<div class="inner"> <div class="inner">
<div class="active-list-item-bg"> <div class="active-list-item-bg">
<el-image :src="item.cover" fit="cover"></el-image> <el-image :src="item.activityCover" fit="cover"></el-image>
</div> </div>
<div class="active-list-item-cont"> <div class="active-list-item-cont">
<div class="active-list-item-cont-header"> <div class="active-list-item-cont-header">
<div class="label">{{item.label}}</div> <div class="label" v-if="item.activityLabel">
<span v-for="(item2, index2) in item.activityLabel.split(',')"
:key="index2">{{item2}}</span>
</div>
<div class="title">{{item.name}}</div> <div class="title">{{item.name}}</div>
</div> </div>
<div class="active-list-item-cont-txt1">{{item.school}}</div> <div class="active-list-item-cont-txt1">{{item.schoolName}} | {{item.subjectName}}</div>
<div class="active-list-item-cont-txt2">{{item.beginTime}} （共{{item.days}}天）</div> <div class="active-list-item-cont-txt2">{{item.activityStartTime}} （共{{item.activityTime}}天）</div>
<div class="active-list-item-cont-txt3">报名截止时间：{{item.bmEndTime}}</div> <div class="active-list-item-cont-txt3">报名截止时间：{{item.bmEndTime}}</div>
<div @click="$router.push('/active/'+item.id)" class="active-list-item-cont-bottom"> <div class="active-list-item-cont-bottom" @click="$router.push('/active/current/'+item.id)">
<div>查看详情</div> <div>查看详情</div>
<i class="el-icon-right"></i> <i class="el-icon-right"></i>
</div> </div>
...@@ -54,18 +58,20 @@ ...@@ -54,18 +58,20 @@
<div :key="index" <div :key="index"
class="reflections_item" v-for="(item, index) in reflectionsList"> class="reflections_item" v-for="(item, index) in reflectionsList">
<div class="item_float"> <div class="item_float">
<div :key="index2" class="tag" v-for="(item2, index2) in item.tag"> <div class="item_float_content">
{{item2}} <div :key="index2" class="tag" v-for="(item2, index2) in item.tag">
</div> {{item2}}
<div class="item_name">
<div>
<div class="name">
{{item.name}}
</div>
<div class="name_line">
</div>
</div> </div>
<div class="item_name">
<div>
<div class="name">
{{item.name}}
</div>
<div class="name_line">
</div>
</div>
</div>
</div> </div>
</div> </div>
<div> <div>
...@@ -74,8 +80,6 @@ ...@@ -74,8 +80,6 @@
</div> </div>
</div> </div>
<div></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -102,68 +106,75 @@ ...@@ -102,68 +106,75 @@
activeList: [ activeList: [
{ {
id: 1, id: 1,
cover: img, activityCover: img,
label: '线上', activityLabel: '线上',
name: '2023年寒假历史营地', name: '2023年寒假历史营地',
school: '南开大学 | 历史学', schoolName: '南开大学',
beginTime: '2023-09-01', subjectName: '历史学',
endTime: '20230903', activityStartTime: '2023-09-01',
days: '3', activityEndTime: '20230903',
activityTime: '3',
bmEndTime: '2023-08-31', bmEndTime: '2023-08-31',
}, },
{ {
id: 2, id: 2,
cover: img, activityCover: img,
label: '线上', activityLabel: '线上',
name: '2023年寒假历史营地2', name: '2023年寒假历史营地2',
school: '南开大学 | 历史学',
beginTime: '2023-09-01', schoolName: '南开大学',
endTime: '20230903', subjectName: '历史学',
days: '3', activityStartTime: '2023-09-01',
activityEndTime: '20230903',
activityTime: '3',
bmEndTime: '2023-08-31', bmEndTime: '2023-08-31',
}, },
{ {
id: 3, id: 3,
cover: img, activityCover: img,
label: '线上', activityLabel: '线上',
name: '2023年寒假历史营地3', name: '2023年寒假历史营地3',
school: '南开大学 | 历史学', schoolName: '南开大学',
beginTime: '2023-09-01', subjectName: '历史学',
endTime: '20230903', activityStartTime: '2023-09-01',
days: '3', activityEndTime: '20230903',
activityTime: '3',
bmEndTime: '2023-08-31', bmEndTime: '2023-08-31',
}, },
{ {
id: 1, id: 1,
cover: img, activityCover: img,
label: '线上', activityLabel: '线上',
name: '2023年寒假历史营地', name: '2023年寒假历史营地',
school: '南开大学 | 历史学', schoolName: '南开大学',
beginTime: '2023-09-01', subjectName: '历史学',
endTime: '20230903', activityStartTime: '2023-09-01',
days: '3', activityEndTime: '20230903',
activityTime: '3',
bmEndTime: '2023-08-31', bmEndTime: '2023-08-31',
}, },
{ {
id: 2, id: 2,
cover: img, activityCover: img,
label: '线上', activityLabel: '线上',
name: '2023年寒假历史营地2', name: '2023年寒假历史营地2',
school: '南开大学 | 历史学', schoolName: '南开大学',
beginTime: '2023-09-01', subjectName: '历史学',
endTime: '20230903', activityStartTime: '2023-09-01',
days: '3', activityEndTime: '20230903',
activityTime: '3',
bmEndTime: '2023-08-31', bmEndTime: '2023-08-31',
}, },
{ {
id: 3, id: 3,
cover: img, activityCover: img,
label: '线上', activityLabel: '线上',
name: '2023年寒假历史营地3', name: '2023年寒假历史营地3',
school: '南开大学 | 历史学', schoolName: '南开大学',
beginTime: '2023-09-01', subjectName: '历史学',
endTime: '20230903', activityStartTime: '2023-09-01',
days: '3', activityEndTime: '20230903',
activityTime: '3',
bmEndTime: '2023-08-31', bmEndTime: '2023-08-31',
} }
], ],
...@@ -215,197 +226,42 @@ ...@@ -215,197 +226,42 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "a/scss/common"; @import "a/scss/common";
@import "a/scss/active/activeList";
@-webkit-keyframes fade { .bannerImg {
0% { width: 100%;
-webkit-transform: translate3d(0, 3em, 0); min-width: 1150px;
transform: translate3d(0, 3em, 0);
opacity: 0
}
100% { ::v-deep .el-carousel__container {
-webkit-transform: translate3d(0, 0, 0); height: inherit;
transform: translate3d(0, 0, 0); min-height: 450px;
opacity: 1
}
}
@keyframes fade { .el-carousel__arrow {
0% { width: 50px;
-webkit-transform: translate3d(0, 3em, 0); height: 50px;
transform: translate3d(0, 3em, 0);
opacity: 0
}
100% { .el-icon-arrow-left,
-webkit-transform: translate3d(0, 0, 0); .el-icon-arrow-right {
transform: translate3d(0, 0, 0); font-size: 20px;
opacity: 1 }
}
} }
}
.bannerImg {
img { img {
/*width: 100%;*/ /*width: 100%;*/
height: inherit; height: inherit;
} }
} }
.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: 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;
/*height: 240px;*/
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: 10px 0 5px;
.label {
font-size: 12px;
padding: 0 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: 32px;
}
.active-list-item-cont-txt2 {
font-size: 14px;
color: #999999;
line-height: 24px;
}
.active-list-item-cont-txt3 {
font-size: 15px;
color: #EC808D;
line-height: 32px;
}
.active-list-item-cont-bottom {
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
border-top: 1px solid #cccccc;
margin-top: 10px;
font-size: 14px;
height: 50px;
line-height: 50px;
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);
}
}
}
}
}
}
.home_title { .home_title {
font-size: 20px; font-size: 26px;
margin: 20px 0; margin: 20px 0;
} }
.active-list {
margin-top: -10px;
}
.home-container { .home-container {
color: #333333; color: #333333;
font-family: "PingFang SC"; font-family: "PingFang SC";
...@@ -438,37 +294,47 @@ ...@@ -438,37 +294,47 @@
font-size: 12px; font-size: 12px;
.reflections_item { .reflections_item {
flex-basis: 48.2%; flex-basis: 48%;
margin: 1.75% 0; margin: 1.75% 0;
background-color: #ffffff; background-color: #ffffff;
height: 163px; height: 163px;
position: relative; position: relative;
width: 200px; width: 200px;
border-radius: 0 0 4px 4px;
border: 1px solid #aaaaaa;
&:nth-child(2n+2) { &:nth-child(2n+2) {
margin: 1.75% 0 1.75% 3.5%; margin: 1.75% 0 1.75% 3.5%;
} }
.item_float { .item_float {
display: flex; height: 20px;
position: absolute; position: absolute;
top: -10%; top: -1px;
margin-left: 8%; left: 8%;
padding: 0 25px 0 0;
background-color: #ffffff;
.item_float_content{
display: flex;
height: 40px;
transform: translateY(-50%);
}
.tag { .tag {
font-size: 16px;
display: flex; display: flex;
background-color: #D7D7D7; background-color: #D7D7D7;
padding: 9px; padding: 0 9px;
margin-right: 10px; margin-right: 10px;
line-height: 40px;
} }
.item_name { .item_name {
line-height: 40px;
font-size: 18px;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
} margin-left: 15px;
.name {
margin-bottom: 10px;
} }
.name_line { .name_line {
...@@ -478,6 +344,7 @@ ...@@ -478,6 +344,7 @@
} }
.item_text { .item_text {
font-size: 14px;
margin: 7% 3%; margin: 7% 3%;
white-space: normal; white-space: normal;
overflow: hidden; overflow: hidden;
......
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