FE_huoran_client/src/pages/science/index.vue

<template>
  <div class="wrap">
    <div class="single-banner">
      <img class="banner-img"
           :src="modules[0].form.pic"
           alt="" />
      <div class="texts">
        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
        <p class="banner-des des">{{ modules[0].form.des }}</p>
      </div>
    </div>

    <div class="block">
      <div class="inner">
        <div class="item wow bounceInLeft"
             data-wow-delay="0.5s"
             :class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
             @click="openLink(modules[1].form)">
          <img src="@/assets/images/science/1.png"
               alt="" />
          <div class="texts">
            <h6>{{ modules[1].form.title }}</h6>
            <div class="des">{{ modules[1].form.des }}</div>
          </div>
        </div>
        <div class="item wow bounceInRight"
             data-wow-delay="0.8s"
             :class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }"
             @click="openLink(modules[2].form)">
          <img src="@/assets/images/science/2.png"
               alt="" />
          <div class="texts rightText">
            <h6>{{ modules[2].form.title }}</h6>
            <div class="des">{{ modules[2].form.des }}</div>
          </div>
        </div>
        <div class="item wow bounceInLeft"
             data-wow-delay="0.5s"
             :class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }"
             @click="openLink(modules[3].form)">
          <img src="@/assets/images/science/3.png"
               alt="" />
          <div class="texts">
            <h6>{{ modules[3].form.title }}</h6>
            <div class="des">{{ modules[3].form.des }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from "@/mixins/page";
import Setting from "@/setting";
import Util from "@/libs/util";
import WOW from "wow.js";
export default {
  mixins: [mixins],
  data () {
    return {
      routes: [],
    };
  },
  mounted () {
    new WOW().init();
  },
  methods: {
    // 获取文章详情
    getInfo () {
      // 预览/详情
      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
        if (data.length) {
          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
          const json = JSON.parse(
            this.preview
              ? data
              : data[data.length - 1][
              data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
              ]
          );
          this.modules = json;
          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
        }
      })
        .catch((err) => { });
    },
  },
};
</script>

<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.inner {
    width: 960px;
}
.single-banner {
    .banner-img {
        height: 21.6rem;
    }
    .texts {
        h6 {
            font-size: 2.16rem;
            margin-bottom: 0.95rem;
        }
        .banner-des {
            font-size: 0.96rem;
        }
    }
}
.block {
    padding: 3.85rem 0;
}
.item {
    position: relative;
    margin-bottom: 2.9rem;
    width: 100%;
    &:hover {
        .texts {
            color: #fff;
            transform: scale(1.05);
            background: #32b6e9 !important;
        }
    }
    img {
        width: 100%;
        height: 22rem;
    }
    &:nth-child(2) .texts {
        color: #fff;
        background: #33b3c1;
    }
    &:nth-child(3) .texts {
        color: #fff;
        background: #e47c22;
    }
    &:nth-child(even) .texts {
        left: auto;
        right: -1.6rem;
    }
    .texts {
        position: absolute;
        top: 3.9rem;
        left: -1.4rem;
        width: 26.6rem;
        padding: 3.5rem 1.9rem;
        color: #333;
        background: #fff6e9;
        transition: 0.5s;
    }
    h6 {
        margin-bottom: 0.875rem;
        font-size: 1.6rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
    }
    .des {
        font-size: 0.88rem;
    }
}

@media (max-width: 1200px) {
    body {
        width: 100% !important;
    }
    .inner {
        width: 80%;
    }
    .item {
        img {
        }
        .rightText {
            right: 12px !important;
        }
        .texts {
            width: 85%;
            box-sizing: border-box;
            left: -1rem;
            &:nth-child(2) {
                right: -1.5rem !important;
            }
            .des {
                -webkit-line-clamp: inherit;
            }
        }
    }
}
@media (max-width: 320px) {
    .wrap {
        .single-banner {
            .banner-img {
                height: 12rem;
            }
            .texts {
                top: 5rem;
                left: 2rem;
                .banner-title {
                    font-size: 1.5rem;
                    margin-bottom: 0.5rem;
                }
                .banner-des {
                    font-size: 0.85rem;
                }
            }
        }
    }
    .block {
        .inner {
            img {
                height: 18rem;
            }
            .texts {
                padding: 1.25rem;
                top: 1.5rem;
                h6 {
                    font-size: 1.2rem;
                }
                .des {
                    font-size: 0.75rem;
                }
            }
        }
    }
}
@media (min-width: 320px) and (max-width: 375px) {
    .wrap {
        .single-banner {
            .banner-img {
                height: 12rem;
            }
            .texts {
                top: 5rem;
                left: 2rem;
                .banner-title {
                    font-size: 1.5rem;
                    margin-bottom: 0.5rem;
                }
                .banner-des {
                    font-size: 0.85rem;
                }
            }
        }
    }
    .block {
        .inner {
            img {
                height: 18rem;
            }
            .texts {
                padding: 1.25rem;
                top: 1.5rem;
                h6 {
                    font-size: 1.4rem;
                }
                .des {
                    font-size: 0.75rem;
                }
            }
        }
    }
}
@media (min-width: 375px) and (max-width: 480px) {
    .wrap {
        .single-banner {
            .banner-img {
                height: 12rem;
            }
            .texts {
                top: 5rem;
                left: 2rem;
                .banner-title {
                    font-size: 1.5rem;
                    margin-bottom: 0.5rem;
                }
                .banner-des {
                    font-size: 0.85rem;
                }
            }
        }
    }
    .block {
        .inner {
            img {
                height: 18rem;
            }
            .texts {
                padding: 1.25rem;
                top: 1.5rem;
                h6 {
                    font-size: 1.4rem;
                }
                .des {
                    font-size: 0.75rem;
                }
            }
        }
    }
}
@media (min-width: 480px) and (max-width: 640px) {
    .wrap {
        .single-banner {
            .banner-img {
                height: 12rem;
            }
            .texts {
                top: 5rem;
                left: 2rem;
                .banner-title {
                    font-size: 1.5rem;
                    margin-bottom: 0.5rem;
                }
                .banner-des {
                    font-size: 0.85rem;
                }
            }
        }
    }
    .block {
        .inner {
            img {
                height: 18rem;
            }
            .texts {
                padding: 1.25rem;
                top: 1.5rem;
            }
        }
    }
}
@media (min-width: 640px) and (max-width: 768px) {
    .wrap {
        .single-banner {
            .banner-img {
                height: 12rem;
            }
            .texts {
                top: 5rem;
                left: 2rem;
                .banner-title {
                    font-size: 1.5rem;
                    margin-bottom: 0.5rem;
                }
                .banner-des {
                    font-size: 0.85rem;
                }
            }
        }
    }
    .block {
        .inner {
            img {
                height: 18rem;
            }
            .texts {
                padding: 1.25rem;
                top: 1.5rem;
            }
        }
    }
}
@media (min-width: 768px) and (max-width: 980px) {
    .wrap {
        .single-banner {
            .banner-img {
                height: 12rem;
            }
            .texts {
                top: 5rem;
                left: 2rem;
                .banner-title {
                    font-size: 1.5rem;
                    margin-bottom: 0.5rem;
                }
                .banner-des {
                    font-size: 0.85rem;
                }
            }
        }
    }
    .block {
        .inner {
            img {
                height: 18rem;
            }
            .texts {
                padding: 1.25rem;
                top: 1.5rem;
            }
        }
    }
}
@media (min-width: 980px) and (max-width: 1200px) {
    .wrap {
        .single-banner {
            .banner-img {
                height: 12rem;
            }
            .texts {
                top: 5rem;
                left: 2rem;
                .banner-title {
                    font-size: 1.5rem;
                    margin-bottom: 0.5rem;
                }
                .banner-des {
                    font-size: 0.85rem;
                }
            }
        }
    }
    .block {
        .inner {
            img {
                height: 18rem;
            }
            .texts {
                padding: 1.25rem;
                top: 1.5rem;
            }
        }
    }
}
</style>