XingYao/RedTourism_Wap.git

parent: c4d58875 | patch | commit | show whitespace

6.详情页顶部图片到下面白色框主体、左右两侧是圆角。 7.高亮状态栏，红色应该和文字等宽 8.详情页选项卡、关键字和简介之间是有分割的

康凯

2021-12-14 f4139513f98ed9fbe149f75e494a49481cd14ccd

6.详情页顶部图片到下面白色框主体、左右两侧是圆角。
7.高亮状态栏，红色应该和文字等宽
8.详情页选项卡、关键字和简介之间是有分割的

4 files modified

	src/views/memory/detail.vue	95 ●●●●● patch \| view \| raw \| blame \| history
	src/views/personage/detail.vue	95 ●●●●● patch \| view \| raw \| blame \| history
	src/views/scenery/detail.vue	89 ●●●●● patch \| view \| raw \| blame \| history
	src/views/spirit/detail.vue	95 ●●●●● patch \| view \| raw \| blame \| history

 src/views/memory/detail.vue

@@ -27,7 +27,9 @@
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div class="search-div">
          <CustomSearch3 v-on:search="SearchImages"></CustomSearch3>
          </div>
          <div class="content-images"
               v-infinite-scroll="NextImages"
               :infinite-scroll-disabled="images.scrollDisabled"
@@ -44,7 +46,9 @@
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
          <div class="search-div">
          <CustomSearch3 v-on:search="SearchVideos"></CustomSearch3>
          </div>
          <div class="content-videos"
               v-infinite-scroll="NextVideos"
               :infinite-scroll-disabled="videos.scrollDisabled"
@@ -61,6 +65,7 @@
                <div class="item-introduce">{{ item.description }}</div>
              </div>
            </div>
            <div class="line"></div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
@@ -200,14 +205,14 @@
    },
    ToImageDetail: function (id) {
      let objId = this.$route.query.id;
      this.$router.push({name: "memory-detail-image", query: {id: id, objId: objId}});
      this.$router.push({name: "scenery-detail-image", query: {id: id, objId: objId}});
    },
    ToVideoDetail: function (id) {
      let objId = this.$route.query.id;
      this.$router.push({name: "memory-detail-video", query: {id: id, objId: objId}});
      this.$router.push({name: "scenery-detail-video", query: {id: id, objId: objId}});
    },
    ToListPage: function () {
      this.$router.push({name: "memory-list"})
      this.$router.push({name: "scenery-list"})
    },
  },
  watch: {
@@ -239,6 +244,12 @@
</script>

<style scoped>
.line {
  width: 100%;
  border: 1px solid #EEEEEE;
  margin: 3vh 0;
}

.data-detail {
  width: 100%;
}
@@ -323,35 +334,62 @@
}

.data-detail .content {
  width: 90%;
  height: 84.1vh;
  margin-left: 5%;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  width: 100%;
  height: 84vh;
  background: #F8F8F8;
}

.mint-navbar {
  width: 100%;
}

.mint-navbar /deep/ .mint-tab-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 7px 0;
}

.mint-navbar /deep/ .mint-tab-item-label {
  width: 8rem;
  font-size: 2rem;
  font-family: Source Han Sans CN;
  font-weight: 500;
  line-height: 2rem;
  color: #767676;
  opacity: 1;

  padding: 10px 0;
}

.mint-navbar /deep/ .is-selected {
  color: #BC0000;
  border-bottom: 0.3vh solid #BC0000;
  border-bottom: 0px;
}

.mint-navbar /deep/ .is-selected .mint-tab-item-label {
  color: #BC0000;
  border-bottom: 0.3vh solid #BC0000;
}

.mint-tab-container {
  width: 100%;
}

.mint-tab-container /deep/ .mint-tab-container-item:nth-child(1) {
  padding-top: 5vh;
}

.content-keyword {
  margin-top: 1vh;
  padding: 5%;
  background: #FFFFFF;
  text-align: left;
  font-size: 1.87rem;
  font-family: Source Han Serif CN;
@@ -372,6 +410,10 @@
}

.content-introduction {
  margin-top: 1vh;
  padding: 5% 5% 15% 5%;
  border-radius: 0 0 30px 30px;
  background: #FFFFFF;
  text-align: left;
  font-size: 1.87rem;
  font-family: Source Han Serif CN;
@@ -392,11 +434,12 @@
}

.mint-tab-container /deep/ .mint-tab-container-item:nth-child(2) {
  padding-top: 2vh;
}

.custom-search3 {
  margin-bottom: 2vh;
.search-div {
  background: #FFFFFF;
  padding: 5%;
  margin-bottom: 1vh;
}

.content-images {
@@ -405,9 +448,22 @@
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  align-content:flex-start;

  height: 65vh;
  overflow: scroll;
  padding-top: 2vh;
  background: #FFFFFF;
  border-radius: 0 0 30px 30px;
}

.content-images .content-item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 50%;
  height: 25vh;
}
@@ -442,14 +498,25 @@
}

.mint-tab-container /deep/ .mint-tab-container-item:nth-child(3) {
  padding-top: 2vh;

}

.content-videos {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  height: 65vh;
  overflow: scroll;
  padding-top: 4vh;
  background: #FFFFFF;
  border-radius: 0 0 30px 30px;
}

.content-videos .line{
  width: 90%;
}

.content-videos .content-item {
@@ -460,7 +527,7 @@
  align-items: center;

  height: 10vh;
  margin: 2vh auto;
  width: 90%;
}

.content-videos .item-left {

 src/views/personage/detail.vue

@@ -27,7 +27,9 @@
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div class="search-div">
          <CustomSearch3 v-on:search="SearchImages"></CustomSearch3>
          </div>
          <div class="content-images"
               v-infinite-scroll="NextImages"
               :infinite-scroll-disabled="images.scrollDisabled"
@@ -44,7 +46,9 @@
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
          <div class="search-div">
          <CustomSearch3 v-on:search="SearchVideos"></CustomSearch3>
          </div>
          <div class="content-videos"
               v-infinite-scroll="NextVideos"
               :infinite-scroll-disabled="videos.scrollDisabled"
@@ -61,6 +65,7 @@
                <div class="item-introduce">{{ item.description }}</div>
              </div>
            </div>
            <div class="line"></div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
@@ -200,14 +205,14 @@
    },
    ToImageDetail: function (id) {
      let objId = this.$route.query.id;
      this.$router.push({name: "personage-detail-image", query: {id: id, objId: objId}});
      this.$router.push({name: "scenery-detail-image", query: {id: id, objId: objId}});
    },
    ToVideoDetail: function (id) {
      let objId = this.$route.query.id;
      this.$router.push({name: "personage-detail-video", query: {id: id, objId: objId}});
      this.$router.push({name: "scenery-detail-video", query: {id: id, objId: objId}});
    },
    ToListPage: function () {
      this.$router.push({name: "personage-list"})
      this.$router.push({name: "scenery-list"})
    },
  },
  watch: {
@@ -239,6 +244,12 @@
</script>

<style scoped>
.line {
  width: 100%;
  border: 1px solid #EEEEEE;
  margin: 3vh 0;
}

.data-detail {
  width: 100%;
}
@@ -323,35 +334,62 @@
}

.data-detail .content {
  width: 90%;
  height: 84.1vh;
  margin-left: 5%;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  width: 100%;
  height: 84vh;
  background: #F8F8F8;
}

.mint-navbar {
  width: 100%;
}

.mint-navbar /deep/ .mint-tab-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 7px 0;
}

.mint-navbar /deep/ .mint-tab-item-label {
  width: 8rem;
  font-size: 2rem;
  font-family: Source Han Sans CN;
  font-weight: 500;
  line-height: 2rem;
  color: #767676;
  opacity: 1;

  padding: 10px 0;
}

.mint-navbar /deep/ .is-selected {
  color: #BC0000;
  border-bottom: 0.3vh solid #BC0000;
  border-bottom: 0px;
}

.mint-navbar /deep/ .is-selected .mint-tab-item-label {
  color: #BC0000;
  border-bottom: 0.3vh solid #BC0000;
}

.mint-tab-container {
  width: 100%;
}

.mint-tab-container /deep/ .mint-tab-container-item:nth-child(1) {
  padding-top: 5vh;
}

.content-keyword {
  margin-top: 1vh;
  padding: 5%;
  background: #FFFFFF;
  text-align: left;
  font-size: 1.87rem;
  font-family: Source Han Serif CN;
@@ -372,6 +410,10 @@
}

.content-introduction {
  margin-top: 1vh;
  padding: 5% 5% 15% 5%;
  border-radius: 0 0 30px 30px;
  background: #FFFFFF;
  text-align: left;
  font-size: 1.87rem;
  font-family: Source Han Serif CN;
@@ -392,11 +434,12 @@
}

.mint-tab-container /deep/ .mint-tab-container-item:nth-child(2) {
  padding-top: 2vh;
}

.custom-search3 {
  margin-bottom: 2vh;
.search-div {
  background: #FFFFFF;
  padding: 5%;
  margin-bottom: 1vh;
}

.content-images {
@@ -405,9 +448,22 @@
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  align-content:flex-start;

  height: 65vh;
  overflow: scroll;
  padding-top: 2vh;
  background: #FFFFFF;
  border-radius: 0 0 30px 30px;
}

.content-images .content-item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 50%;
  height: 25vh;
}
@@ -442,14 +498,25 @@
}

.mint-tab-container /deep/ .mint-tab-container-item:nth-child(3) {
  padding-top: 2vh;

}

.content-videos {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  height: 65vh;
  overflow: scroll;
  padding-top: 4vh;
  background: #FFFFFF;
  border-radius: 0 0 30px 30px;
}

.content-videos .line{
  width: 90%;
}

.content-videos .content-item {
@@ -460,7 +527,7 @@
  align-items: center;

  height: 10vh;
  margin: 2vh auto;
  width: 90%;
}

.content-videos .item-left {

 src/views/scenery/detail.vue

@@ -27,7 +27,9 @@
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div class="search-div">
          <CustomSearch3 v-on:search="SearchImages"></CustomSearch3>
          </div>
          <div class="content-images"
               v-infinite-scroll="NextImages"
               :infinite-scroll-disabled="images.scrollDisabled"
@@ -44,7 +46,9 @@
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
          <div class="search-div">
          <CustomSearch3 v-on:search="SearchVideos"></CustomSearch3>
          </div>
          <div class="content-videos"
               v-infinite-scroll="NextVideos"
               :infinite-scroll-disabled="videos.scrollDisabled"
@@ -61,6 +65,7 @@
                <div class="item-introduce">{{ item.description }}</div>
              </div>
            </div>
            <div class="line"></div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
@@ -239,6 +244,12 @@
</script>

<style scoped>
.line {
  width: 100%;
  border: 1px solid #EEEEEE;
  margin: 3vh 0;
}

.data-detail {
  width: 100%;
}
@@ -323,35 +334,62 @@
}

.data-detail .content {
  width: 90%;
  height: 84.1vh;
  margin-left: 5%;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  width: 100%;
  height: 84vh;
  background: #F8F8F8;
}

.mint-navbar {
  width: 100%;
}

.mint-navbar /deep/ .mint-tab-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 7px 0;
}

.mint-navbar /deep/ .mint-tab-item-label {
  width: 8rem;
  font-size: 2rem;
  font-family: Source Han Sans CN;
  font-weight: 500;
  line-height: 2rem;
  color: #767676;
  opacity: 1;

  padding: 10px 0;
}

.mint-navbar /deep/ .is-selected {
  color: #BC0000;
  border-bottom: 0.3vh solid #BC0000;
  border-bottom: 0px;
}

.mint-navbar /deep/ .is-selected .mint-tab-item-label {
  color: #BC0000;
  border-bottom: 0.3vh solid #BC0000;
}

.mint-tab-container {
  width: 100%;
}

.mint-tab-container /deep/ .mint-tab-container-item:nth-child(1) {
  padding-top: 5vh;
}

.content-keyword {
  margin-top: 1vh;
  padding: 5%;
  background: #FFFFFF;
  text-align: left;
  font-size: 1.87rem;
  font-family: Source Han Serif CN;
@@ -372,6 +410,10 @@
}

.content-introduction {
  margin-top: 1vh;
  padding: 5% 5% 15% 5%;
  border-radius: 0 0 30px 30px;
  background: #FFFFFF;
  text-align: left;
  font-size: 1.87rem;
  font-family: Source Han Serif CN;
@@ -392,11 +434,12 @@
}

.mint-tab-container /deep/ .mint-tab-container-item:nth-child(2) {
  padding-top: 2vh;
}

.custom-search3 {
  margin-bottom: 2vh;
.search-div {
  background: #FFFFFF;
  padding: 5%;
  margin-bottom: 1vh;
}

.content-images {
@@ -405,9 +448,22 @@
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  align-content:flex-start;

  height: 65vh;
  overflow: scroll;
  padding-top: 2vh;
  background: #FFFFFF;
  border-radius: 0 0 30px 30px;
}

.content-images .content-item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 50%;
  height: 25vh;
}
@@ -442,14 +498,25 @@
}

.mint-tab-container /deep/ .mint-tab-container-item:nth-child(3) {
  padding-top: 2vh;

}

.content-videos {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  height: 65vh;
  overflow: scroll;
  padding-top: 4vh;
  background: #FFFFFF;
  border-radius: 0 0 30px 30px;
}

.content-videos .line{
  width: 90%;
}

.content-videos .content-item {
@@ -460,7 +527,7 @@
  align-items: center;

  height: 10vh;
  margin: 2vh auto;
  width: 90%;
}

.content-videos .item-left {

 src/views/spirit/detail.vue

@@ -27,7 +27,9 @@
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div class="search-div">
          <CustomSearch3 v-on:search="SearchImages"></CustomSearch3>
          </div>
          <div class="content-images"
               v-infinite-scroll="NextImages"
               :infinite-scroll-disabled="images.scrollDisabled"
@@ -44,7 +46,9 @@
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
          <div class="search-div">
          <CustomSearch3 v-on:search="SearchVideos"></CustomSearch3>
          </div>
          <div class="content-videos"
               v-infinite-scroll="NextVideos"
               :infinite-scroll-disabled="videos.scrollDisabled"
@@ -61,6 +65,7 @@
                <div class="item-introduce">{{ item.description }}</div>
              </div>
            </div>
            <div class="line"></div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
@@ -200,14 +205,14 @@
    },
    ToImageDetail: function (id) {
      let objId = this.$route.query.id;
      this.$router.push({name: "spirit-detail-image", query: {id: id, objId: objId}});
      this.$router.push({name: "scenery-detail-image", query: {id: id, objId: objId}});
    },
    ToVideoDetail: function (id) {
      let objId = this.$route.query.id;
      this.$router.push({name: "spirit-detail-video", query: {id: id, objId: objId}});
      this.$router.push({name: "scenery-detail-video", query: {id: id, objId: objId}});
    },
    ToListPage: function () {
      this.$router.push({name: "spirit-list"})
      this.$router.push({name: "scenery-list"})
    },
  },
  watch: {
@@ -239,6 +244,12 @@
</script>

<style scoped>
.line {
  width: 100%;
  border: 1px solid #EEEEEE;
  margin: 3vh 0;
}

.data-detail {
  width: 100%;
}
@@ -323,35 +334,62 @@
}

.data-detail .content {
  width: 90%;
  height: 84.1vh;
  margin-left: 5%;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  width: 100%;
  height: 84vh;
  background: #F8F8F8;
}

.mint-navbar {
  width: 100%;
}

.mint-navbar /deep/ .mint-tab-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 7px 0;
}

.mint-navbar /deep/ .mint-tab-item-label {
  width: 8rem;
  font-size: 2rem;
  font-family: Source Han Sans CN;
  font-weight: 500;
  line-height: 2rem;
  color: #767676;
  opacity: 1;

  padding: 10px 0;
}

.mint-navbar /deep/ .is-selected {
  color: #BC0000;
  border-bottom: 0.3vh solid #BC0000;
  border-bottom: 0px;
}

.mint-navbar /deep/ .is-selected .mint-tab-item-label {
  color: #BC0000;
  border-bottom: 0.3vh solid #BC0000;
}

.mint-tab-container {
  width: 100%;
}

.mint-tab-container /deep/ .mint-tab-container-item:nth-child(1) {
  padding-top: 5vh;
}

.content-keyword {
  margin-top: 1vh;
  padding: 5%;
  background: #FFFFFF;
  text-align: left;
  font-size: 1.87rem;
  font-family: Source Han Serif CN;
@@ -372,6 +410,10 @@
}

.content-introduction {
  margin-top: 1vh;
  padding: 5% 5% 15% 5%;
  border-radius: 0 0 30px 30px;
  background: #FFFFFF;
  text-align: left;
  font-size: 1.87rem;
  font-family: Source Han Serif CN;
@@ -392,11 +434,12 @@
}

.mint-tab-container /deep/ .mint-tab-container-item:nth-child(2) {
  padding-top: 2vh;
}

.custom-search3 {
  margin-bottom: 2vh;
.search-div {
  background: #FFFFFF;
  padding: 5%;
  margin-bottom: 1vh;
}

.content-images {
@@ -405,9 +448,22 @@
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  align-content:flex-start;

  height: 65vh;
  overflow: scroll;
  padding-top: 2vh;
  background: #FFFFFF;
  border-radius: 0 0 30px 30px;
}

.content-images .content-item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 50%;
  height: 25vh;
}
@@ -442,14 +498,25 @@
}

.mint-tab-container /deep/ .mint-tab-container-item:nth-child(3) {
  padding-top: 2vh;

}

.content-videos {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  height: 65vh;
  overflow: scroll;
  padding-top: 4vh;
  background: #FFFFFF;
  border-radius: 0 0 30px 30px;
}

.content-videos .line{
  width: 90%;
}

.content-videos .content-item {
@@ -460,7 +527,7 @@
  align-items: center;

  height: 10vh;
  margin: 2vh auto;
  width: 90%;
}

.content-videos .item-left {

			@@ -27,7 +27,9 @@
			</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="2">
			<div class="search-div">
			<CustomSearch3 v-on:search="SearchImages"></CustomSearch3>
			</div>
			<div class="content-images"
			v-infinite-scroll="NextImages"
			:infinite-scroll-disabled="images.scrollDisabled"
			@@ -44,7 +46,9 @@
			</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="3">
			<div class="search-div">
			<CustomSearch3 v-on:search="SearchVideos"></CustomSearch3>
			</div>
			<div class="content-videos"
			v-infinite-scroll="NextVideos"
			:infinite-scroll-disabled="videos.scrollDisabled"
			@@ -61,6 +65,7 @@
			<div class="item-introduce">{{ item.description }}</div>
			</div>
			</div>
			<div class="line"></div>
			</div>
			</mt-tab-container-item>
			</mt-tab-container>
			@@ -200,14 +205,14 @@
			},
			ToImageDetail: function (id) {
			let objId = this.$route.query.id;
			this.$router.push({name: "memory-detail-image", query: {id: id, objId: objId}});
			this.$router.push({name: "scenery-detail-image", query: {id: id, objId: objId}});
			},
			ToVideoDetail: function (id) {
			let objId = this.$route.query.id;
			this.$router.push({name: "memory-detail-video", query: {id: id, objId: objId}});
			this.$router.push({name: "scenery-detail-video", query: {id: id, objId: objId}});
			},
			ToListPage: function () {
			this.$router.push({name: "memory-list"})
			this.$router.push({name: "scenery-list"})
			},
			},
			watch: {
			@@ -239,6 +244,12 @@
			</script>

			<style scoped>
			.line {
			width: 100%;
			border: 1px solid #EEEEEE;
			margin: 3vh 0;
			}

			.data-detail {
			width: 100%;
			}
			@@ -323,35 +334,62 @@
			}

			.data-detail .content {
			width: 90%;
			height: 84.1vh;
			margin-left: 5%;
			border-radius: 30px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			width: 100%;
			height: 84vh;
			background: #F8F8F8;
			}

			.mint-navbar {
			width: 100%;
			}

			.mint-navbar /deep/ .mint-tab-item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			padding: 7px 0;
			}

			.mint-navbar /deep/ .mint-tab-item-label {
			width: 8rem;
			font-size: 2rem;
			font-family: Source Han Sans CN;
			font-weight: 500;
			line-height: 2rem;
			color: #767676;
			opacity: 1;

			padding: 10px 0;
			}

			.mint-navbar /deep/ .is-selected {
			color: #BC0000;
			border-bottom: 0.3vh solid #BC0000;
			border-bottom: 0px;
			}

			.mint-navbar /deep/ .is-selected .mint-tab-item-label {
			color: #BC0000;
			border-bottom: 0.3vh solid #BC0000;
			}

			.mint-tab-container {
			width: 100%;
			}

			.mint-tab-container /deep/ .mint-tab-container-item:nth-child(1) {
			padding-top: 5vh;
			}

			.content-keyword {
			margin-top: 1vh;
			padding: 5%;
			background: #FFFFFF;
			text-align: left;
			font-size: 1.87rem;
			font-family: Source Han Serif CN;
			@@ -372,6 +410,10 @@
			}

			.content-introduction {
			margin-top: 1vh;
			padding: 5% 5% 15% 5%;
			border-radius: 0 0 30px 30px;
			background: #FFFFFF;
			text-align: left;
			font-size: 1.87rem;
			font-family: Source Han Serif CN;
			@@ -392,11 +434,12 @@
			}

			.mint-tab-container /deep/ .mint-tab-container-item:nth-child(2) {
			padding-top: 2vh;
			}

			.custom-search3 {
			margin-bottom: 2vh;
			.search-div {
			background: #FFFFFF;
			padding: 5%;
			margin-bottom: 1vh;
			}

			.content-images {
			@@ -405,9 +448,22 @@
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			align-content:flex-start;

			height: 65vh;
			overflow: scroll;
			padding-top: 2vh;
			background: #FFFFFF;
			border-radius: 0 0 30px 30px;
			}

			.content-images .content-item {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			width: 50%;
			height: 25vh;
			}
			@@ -442,14 +498,25 @@
			}

			.mint-tab-container /deep/ .mint-tab-container-item:nth-child(3) {
			padding-top: 2vh;

			}

			.content-videos {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			height: 65vh;
			overflow: scroll;
			padding-top: 4vh;
			background: #FFFFFF;
			border-radius: 0 0 30px 30px;
			}

			.content-videos .line{
			width: 90%;
			}

			.content-videos .content-item {
			@@ -460,7 +527,7 @@
			align-items: center;

			height: 10vh;
			margin: 2vh auto;
			width: 90%;
			}

			.content-videos .item-left {