|
|
@@ -0,0 +1,108 @@
|
|
|
+<template>
|
|
|
+ <div class="content">
|
|
|
+ <div class="conBox big-title">
|
|
|
+ <span>
|
|
|
+ {{lang===langType.cn?"新闻中心":getAbbrText("新闻中心")}}
|
|
|
+ </span>
|
|
|
+ <div class="hr"></div>
|
|
|
+ </div>
|
|
|
+ <div class="conBox product-type">
|
|
|
+ <p
|
|
|
+ v-for="(item,i) in types"
|
|
|
+ :key="item.key"
|
|
|
+ :class="`type-item ${item.key===type?'type-selected':''}`"
|
|
|
+ @click="selectType(item.key)"
|
|
|
+ >
|
|
|
+ <span class="icon-box">
|
|
|
+ <svg-icon :icon-class="item.icon"/>
|
|
|
+ </span>
|
|
|
+ <span class="type-name">{{lang===langType.cn?item.title:getAbbrText(item.title)}}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import langMap from "@/map/langMap";
|
|
|
+import {sTypes} from "~/map/newMap";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "newsTypes",
|
|
|
+ props: {
|
|
|
+ lang:{
|
|
|
+ default: langMap.lang.cn
|
|
|
+ },
|
|
|
+ type:{
|
|
|
+ default: 'all'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ langType: langMap.lang,
|
|
|
+ types: sTypes
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getLangText(str) {
|
|
|
+ return langMap.getText(this.lang, str);
|
|
|
+ },
|
|
|
+ getAbbrText(str) {
|
|
|
+ return langMap.getAbbrText(this.lang, str);
|
|
|
+ },
|
|
|
+ selectType(nextType){
|
|
|
+ console.log(nextType)
|
|
|
+ if (this.type === nextType){
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+ this.$root.$emit('changeNewsType',nextType);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.content{
|
|
|
+ cursor: default;
|
|
|
+}
|
|
|
+.content .big-title{
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+.product-type{
|
|
|
+ height: 120px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4,1fr);
|
|
|
+}
|
|
|
+
|
|
|
+.product-type .type-item{
|
|
|
+ width: auto;
|
|
|
+ height: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.product-type .type-item:hover{
|
|
|
+ color: orangered;
|
|
|
+}
|
|
|
+.content .product-type .type-selected{
|
|
|
+ color: #f88330;
|
|
|
+}
|
|
|
+.product-type .type-item .icon-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 4rem;
|
|
|
+ padding-bottom: 20px;
|
|
|
+}
|
|
|
+.content .product-type .type-selected .icon-box{
|
|
|
+ border-bottom: 1px solid deepskyblue;
|
|
|
+}
|
|
|
+.product-type .type-item .type-name{
|
|
|
+ width: 100%;
|
|
|
+ height: 60px;
|
|
|
+ font-size: 1.3rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+</style>
|