P0006/src/view/overview.vue

<template>
  <div>
    <el-carousel trigger="click" height="400px">
      <el-carousel-item v-for="item in 3" :key="item">
        <img src="//lanhu.oss-cn-beijing.aliyuncs.com/pso3qae4u2g8lb8tie1nc2mweul0p5j5i81ef68b8f-e805-4d9f-9c5d-5679d724f7c3"/>
      </el-carousel-item>
    </el-carousel>
    <el-main style="width: 960px;margin: 0 auto">
      <el-row class="card_style1">
        <el-col :span="6"><div class="grid-content bg-purple"></div>
          <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
            <div slot="header">
              <span><el-divider direction="vertical"></el-divider>重要信息</span>
              <el-button style="float: right; padding: 3px 0;color: #fff;font-size: 12px" type="text">更多&gt;&gt;</el-button>
            </div>
            <div v-for="o in 10" :key="o" class="text item">
              {{'List item ' + o }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div>
          <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px',height:'418px' }">
            <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png"/>
          </el-card>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div>
          <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
            <div slot="header">
              <span><el-divider direction="vertical"></el-divider>新闻资讯</span>
              <el-button style="float: right; padding: 3px 0;color: #fff;font-size: 12px" type="text">更多&gt;&gt;</el-button>
            </div>
            <div v-for="o in 10" :key="o" class="text item">
              {{'List item ' + o }}
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-card class="box-card" shadow="never" :body-style="{ padding: '0px' }" style="margin-top: 10px">
        <el-row class="card_style2">
          <el-col :span="12">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>行业动态</span>
                <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
              </div>
              <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
              <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>产业政策</span>
                <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
              </div>
              <div class="list" v-for="o in 4">
                <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
                <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="never" :body-style="{ padding: '0px' }" style="margin-top: 10px">
        <el-row class="card_style2">
          <el-col :span="8">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>合作交流</span>
                <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
              </div>
              <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
              <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
            </el-card>
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
              <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>知识产权</span>
                <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
              </div>
              <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
              <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
            </el-card>
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
              <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>会员产品</span>
                <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
              </div>
              <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
              <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
            </el-card>
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
              <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
              <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="never" :body-style="{ padding: '0px' }" style="margin-top: 10px">
        <el-row class="card_style2">
          <el-col :span="12" style="position: relative">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>合作交流</span>
                <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
              </div>
              <div class="list" v-for="o in 4">
                <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
                <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
              </div>
            </el-card>
            <div style="border-right: 1px solid #eee;width:1px;height: 320px;position: absolute;top:15px;right: 0"></div>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>企业认定</span>
                <el-button style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</el-button>
              </div>
              <div class="list" v-for="o in 4">
                <h2>半导体产业的分工，芯片设计服务公司大有可为</h2>
                <p>回顾历史，半导体产业模式在不断随着市场需求而变化。像一个帝国模式的演变，以1980年作为分界线，往前则是IDM（Integra</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="never" :body-style="{ padding: '0px' }" style="margin-top: 10px">
        <el-row class="card_style2">
          <el-col :span="24">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>会员企业</span>
              </div>
              <div v-for="o in 10" style="display: inline-table;width: 135px;height: 62px;border: 1px solid #eee;margin: 10px 20px;text-align: center">
                <img src="../assets/img/psbgg7t8t6t7ljqxtsg9h7ly4mpk83p6f1c4592a0-a2cd-41a9-bb83-8feb2ffe175e.png"/>
              </div>
            </el-card>
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 20px' }">
              <div slot="header">
                <span><el-divider direction="vertical"></el-divider>友情链接</span>
              </div>
              <div >
                <el-button type="text" style="color: #255089">国家发改委 | 国家工信部 | 国家财政部 | 国家税务机关 | 中国海关 </el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </el-main>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>
<style>
.item{
  padding: 10px 0;
}
</style>