<template>
  <div class="about_us">
    <!-- 顶部图片 -->
    <div class="about_us_bg"></div>
    <!--标签栏 -->
    <ProductsTabsItem :tab-list="aboutTabs" :title="1" :fatherMethod="handleClick"/>
    <!-- 关于我们的内容-->
    <el-row type="flex">
      <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
      <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
        <div class="introduce" id="introduce">
          <p v-for="(item,index) in pList" :key="index">
            {{ item.text }}
          </p>
        </div>
        <div class="introduce band" id="band">
          <p v-for="(item,index) in bandList" :key="index">
            <span>{{ item.text1 }}</span>
            <span>{{ item.text2 }}</span>
          </p>
        </div>
        <div class="introduce band" id="ideas">
          <p v-for="(item,index) in ideaList" :key="index">
            <span>{{ item.text1 }}</span>
            <span>{{ item.text2 }}</span>
            <span>{{ item.text3 }}</span>
          </p>
        </div>
        <div class="culture" id="culture">
          <div id="culture_content" v-for="(item,index) in cultureList" :key="index" :class="'cul_'+index">
            <div class="culture_img">
              <img :src="item.src" alt=""/>
            </div>
            <div class="culture_right">
              <span>{{ item.text1 }}</span>
              <span>{{ item.text2 }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ProductsTabsItem from "@/components/ProductsTabsItem";

export default {
  name: "index",
  components: {ProductsTabsItem},
  data() {
    return {
      aboutTabs: [
        {
          label: '企业简介',
          name: 'first'
        },
        {
          label: '品牌文化',
          name: 'second'
        },
        {
          label: '企业观点',
          name: 'third'
        },
        {
          label: '企业文化',
          name: 'four'
        }
      ],
      pList: [
        {
          text: '广东祥睿陶瓷有限公司，于2011年在中国佛山成立，在成立之初，产品精准定位于大理石品类，为设计师打造简奢风格提供瓷砖材料素材。专注于产品的研发，从整体空间应用方向进行单品的开发研究，获得国内外众多设计师的青睐与认可，海外亦有部分专卖店展示。'
        },
        {
          text: '公司依托便利的区位和人才优势，积极容身于国际圈，以其独特且具备设计韵味的产品体系，在国际舞台上崭露头角。凭借其先天的国际基因，产品开发潮流化，且与意大利知名瓷砖设计机构进行过多次合作。'
        },
        {
          text: '艺鹏瓷砖注重于产品的环保性能，将应用美学与环保健康结合起来，为用户寻求高品质瓷砖应用解决方案，由于其专注的匠心精神，先后获得业内多项殊荣。'
        },
        {
          text: '现面向全国各地开展招商加盟业务，专业的团队，打造服务一体化的招商体系，公司以“诚信、务实、全力支持”的加盟理念为每个渴望成功的加盟商提供投资少、风险低、增值快、市场潜力无限的投资机会，不断为广大加盟商创造盈利空间，我们将与加盟商一起不断创新、追求共赢、共享全新市场的无限商机。我们深信，加入成为艺鹏特许经营加盟商，将为您自己开创出一个不一样的成就人生！'
        }
      ],
      bandList: [
        {
          text1: '品牌主张：把人文注入生活、品鉴艺术魅力、享受知性人生',
          text2: '艺鹏主张利用空间的创新，把人们的生活从物质的享受，升华到一个精神享受境界。主张把人文元素通过空间存在的表现形式注入到生活中，而使生活处在一种艺术的魅力氛围中，静静品味人生的点点滴滴。'
        },
        {
          text1: '品牌气质：高贵、艺术、完美、人文、知性',
          text2: '高贵是艺鹏的外在气氛你，艺术是艺鹏的表现形象。完美是艺鹏的目标追求，人文是艺鹏的品牌内涵，知性是艺鹏的人生解读。'
        }, {
          text1: '品牌文化：人文创新完美艺术空间、知性引领高贵时尚潮流',
          text2: '艺鹏以人文的魅力运用到空间创造中，使空间艺术趋于一种完美境界；艺鹏的这种知性艺术手法，对空间、对人生、都是一种旗帜性的标榜；是一种领先于时代的思想和品位追求也必将引领时尚的潮流，把人生导向高贵的商品高度。'
        }, {
          text1: '品牌理念：提升人居生活品味、打造知性时尚空间',
          text2: '艺鹏的最终宗旨是提升人居生活品味，过程是打造知性时尚的空间。通过空间的打造和创新，来承载生活的无限美好和梦想。'
        }, {
          text1: '产品思路：以人文思维、专注陶瓷科技；做高端、知性的文化陶瓷',
          text2: '艺鹏不为产品而做产品，艺鹏使用一种艺术的追求来雕琢空间，传承人文精神，通过陶瓷的科技创新来实现；突破传统的空间文化，提倡文化陶瓷的新理念，打造一种高端的，知性人生。'
        },
      ],
      ideaList: [
        {
          text1: '企业文化宣言',
          text2: '以文化文本，凝聚人才，铸造精品，历练价值，成就品牌'
        },
        {
          text1: '企业文化核心',
          text2: '团队致胜，倡导自我奋斗，自我超越；通过团队协作实现企业与员工的共同发展，建立共同价值信仰，以共同目标为行动的出发点与落脚点；在职能效率的基础上加强团队协作，互为包容那个，互为扶助，求和力，提效率实现客户、经销商、员工、社会以及企业自身的多方共赢。'
        }, {
          text1: '企业精神',
          text2: '团结、敬业、务实、创新'
        }, {
          text1: '企业目标',
          text2: '以成为中国建筑陶瓷行业顶级制造商为目标，以顶尖科技与创新思想为两翼，致力将中国建陶推向世界，打造百年世界品牌。'
        }, {
          text1: '企业风格',
          text2: '实实在在做人，踏踏实实做事；真真切切承诺，切切实实服务。'
        }, {
          text1: '企业经营方针',
          text2: '专注本业，以客为尊；持续发展，多赢共荣。'
        }, {
          text1: '工作作风',
          text2: '快速反应，日事日毕，不找借口，全力以赴。  品牌定位：艺术创新、诗化人生；高端文艺、知性陶瓷',
          text3: '艺鹏是一种建立在艺术上的诗画人生，有着诗的气质，又有着画的美感；在此的延续上，艺鹏展示的是一种高端的文艺，是一种人生的智慧之美。这就是艺鹏的知性本质之所在。也是艺鹏区别于其他品牌的个性所在。'
        }
      ],
      cultureList: [
        {
          src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351034036451.jpg',
          text1: '互 信',
          text2: '互相信任，企业与员工、消费者、合作伙伴、供应商相互之间需形成良好的信任基础，做到心口如一，言行一致，才能以行取信。内部信任，重在塑造企业文化环境，使员工与企业之间达成心理契约， 外部信任，重在建立真实坦诚的合作关系，使其与企业达成一致的思想意识。'
        },
        {
          src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351088324141.jpg',
          text1: '责 任',
          text2: '责任担当，全体员工具有强烈的责任意识，卓越的责任能力，自觉的责任行为，建立完整有序、纵横交错的责任链，勇于承担责任，主动把责任转化为自觉行动，转化为推动企业发展的统一意识，转化为推动工作的强劲动力，做到对社会负责，对企业负责，对客户负责，对同事负责，对自己负责。树立责任意识，以感恩的心态回馈社会。'
        },
        {
          src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351138654829.jpg',
          text1: '创 新',
          text2: '持续改善工艺、产品、管理等各方面，我们以先进的理念，灵活应变的品牌策略，勇于拼搏不断完善的心态，创造出高品质产品；结合公司自身状况，以一点一滴的改善和进步，积聚成公司跨越式的发展；我们将加大激励改善创新机制，鼓励员工勇于开拓超越自我，以顾客需求为导向，不断推出先进独特的，极赋时代感的产品及服务。'
        },
        {
          src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351185978147.jpg',
          text1: '共 赢',
          text2: '携手共赢，携手式合作的基础，共赢式合作的目的；树立协作共赢，合作精神，与合作伙伴共同成长，相互尊重和信任，共享成果，是我们企业和客户共同追求的目标；宽容待人，与客户及伙伴风雨同舟，携手开拓陶瓷行业的新空间和新市场，共同实现互利和双赢。'
        }
      ]
    }
  },
  methods: {
    handleClick(tab) {
      const introduce = document.getElementById('introduce');
      const band = document.getElementById('band');
      const ideas = document.getElementById('ideas');
      const culture = document.getElementById('culture');
      if (tab.index == 0) {
        introduce.style.display = "block"
        band.style.display = "none"
        ideas.style.display = "none"
        culture.style.display = "none"
      } else if (tab.index == 1) {
        introduce.style.display = "none"
        band.style.display = "block"
        ideas.style.display = "none"
        culture.style.display = "none"
      } else if (tab.index == 2) {
        introduce.style.display = "none"
        band.style.display = "none"
        ideas.style.display = "block"
        culture.style.display = "none"
      } else if (tab.index == 3) {
        introduce.style.display = "none"
        band.style.display = "none"
        ideas.style.display = "none"
        culture.style.display = "block"
      }
    }
  }
}
</script>

<style scoped lang="scss">
#band {
  display: none;
}

#ideas {
  display: none;
}

#culture {
  display: none;
  margin: 60px 0;
}

* {
  font: 16px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
}

.about_us {
  min-width: 1300px;

  .about_us_bg {
    background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448450589680815.jpg");
    width: 100%;
    height: 360px;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .introduce {
    padding: 40px 0;
    font-size: 16px;

    p {
      padding-bottom: 25px;
    }
  }

  .band {
    p {
      padding-bottom: 50px;

      span {
        display: block;
      }
    }
  }

  .cul_1 {
    flex-direction: row-reverse;
  }

  .cul_3 {
    flex-direction: row-reverse;
  }

  #culture_content {
    display: flex;
    padding: 10px 10px 40px 10px;

    .culture_img {
      padding: 10px;
      margin: 0 30px;
    }


    .culture_right {
      padding: 10px;

      span:first-child {
        display: block;
      }

      span:last-child {
        font-size: 14px;
        margin-top: 0px;
        margin-bottom: 0px;
        white-space: normal;
        padding: 0px;
        line-height: 32px;
        color: rgb(94, 94, 94);
      }
    }
  }
}
</style>
