feiyang-web/src/views/project.vue

<template>
    <div>
        <div class="page_ban">
            <div class="img compbg"></div>
            <div class="content">
                <div class="page_nav">
                    <div class="name">
                        <a style="padding: 0;" href="">工程展示</a> <a href="javascript:;">工程展示</a>
                    </div>
                
                </div>
            </div>
        </div>
        <div style="margin: 60px 0px;text-align: center;" >
    <el-radio-group v-model="radio3" style="margin: auto;" >
      <el-radio-button class="myself" style="border-radius: 26px;margin-right:18px" label="1" border>房屋建筑</el-radio-button>
      <el-radio-button style="border-radius: 26px;margin-right:18px" label="2" border >市政公路</el-radio-button>
      <el-radio-button style="border-radius: 26px;margin-right:18px" label="3" border >工业建筑</el-radio-button>
      <el-radio-button style="border-radius: 26px;margin-right:18px" label="4" border >金属门窗</el-radio-button>
      <el-radio-button style="border-radius: 26px;margin-right:18px" label="5" border >钢结构厂</el-radio-button>
    </el-radio-group>
  </div>
  <div class="content2" style="width: 80%;margin: auto;display: flex;justify-content: space-between;flex-wrap: wrap;">
    <div style="width: 32%;border-radius: 15px 15px 0 0 ;background-color: rgb(245,245,245);margin-bottom: 2%;">
     <img src="@/assets/images/project1.png" style="width: 100%;border-radius: 15px 15px 0 0 ;">
     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
    <p>兴国幼儿园</p><p class="project-font" >MORE...</p>
    </div>
    </div>
    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
     <img src="@/assets/images/project2.png" style="width: 100%;border-radius: 15px 15px 0 0 ;">
     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
    <p>漳州龙海石码中心小学</p><p class="project-font" >MORE...</p>
    </div>
    </div>
    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
     <img src="@/assets/images/project3.png" style="width: 100%;border-radius: 15px 15px 0 0 ">
     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
    <p>漳州市保利时光印象
</p><p class="project-font" >MORE...</p>
    </div>
    </div>
    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
     <img src="@/assets/images/project4.png" style="width: 100%;border-radius: 15px 15px 0 0 ">
     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
    <p>2021P07地块(一期)二期
</p><p class="project-font" >MORE...</p>
    </div>
    </div>
    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
     <img src="@/assets/images/project5.png" style="width: 100%;border-radius: 15px 15px 0 0">
     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
    <p>厦门现代服务业基地
</p><p class="project-font" >MORE...</p>
    </div>
    </div>
    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
     <img src="@/assets/images/project6.png" style="width: 100%;border-radius: 15px 15px 0 0;">
     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
    <p>高林学校</p><p class="project-font" >MORE...</p>
    </div>
    </div>
    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
     <img src="@/assets/images/project7.png" style="width: 100%;border-radius: 15px 15px 0 0;">
     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
    <p>J2016P01地块建设工程
</p><p class="project-font" >MORE...</p>
    </div>
    </div>
    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
     <img src="@/assets/images/project8.png" style="width: 100%;border-radius: 15px 15px 0 0;">
     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
    <p>保利叁仟栋三期(地块二)
</p><p class="project-font" >MORE...</p>
    </div>
    </div>
    <div style="width: 32%;border-radius: 15px 15px 0 0;background-color: rgb(245,245,245);margin-bottom: 2%;">
     <img src="@/assets/images/project9.png" style="width: 100%;border-radius: 15px 15px 0 0;">
     <div style="padding: 2px 20px;display:flex ;justify-content: space-between;">
    <p>南安保利香槟公馆
</p><p class="project-font" >MORE...</p>
    </div>
    </div>
   
    
  </div>
  <el-pagination style="text-align: center;margin: 60px;"
  background
  layout="prev, pager, next"
  prev-text="上一页"
  next-text="下一页"
  :total="50">

</el-pagination>
    </div>
    
</template>
<script>
export default{
    data(){
        return{
            activeName:'first',
            radio3:'1'
        }
    },
    methods:{
        handleClick(){
            
        }
    }
}
</script>
<style scoped>
.compbg {
    background-image: url('../assets/images/banner.png');
}

.page_ban {
    height: 404px;
    position: relative;
    text-align: center;
    z-index: 101;
}

.page_ban .img {
    width: 100%;
    height: 100%;

    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.page_ban .content {
    position: relative;
    height: 100%;
}
.content {
    width: 80%;
    margin: 0 auto;
}

.page_nav {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}
div,
li {
    box-sizing: border-box;
}

.page_nav .name {
    float: left;
}

.page_nav .list {
    position: relative;
    float: right;
    margin-right: -35px;
}

.page_nav a {
    float: left;
    line-height: 76px;
    position: relative;
    font-size: 14.5px;

    color: white;
    font-weight: bold;
    text-decoration: none;
}

.page_nav .name a {
    padding-left: 30px;
    /* background: url() no-repeat left 30px; */
}

.page_nav .list {
    position: relative;
    float: right;
    margin-right: -35px;
}

.page_nav .list a {
    color: #e7dfd2;
    color: rgba(231, 223, 210, .7);
    margin-right: 35px;
}

.page_nav a {
    float: left;
    line-height: 76px;
    position: relative;
    font-size: 14.5px;

    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
}

.page_nav .inner_bor {
    height: 4px;
    background: #f23c39;
    position: absolute;
    bottom: -4px;
    left: 0;
    display: block;
}

::v-deep .el-tabs__item {

    color: rgba(255, 255, 255, 0.8);
    border: none;
}

::v-deep .el-tabs__nav-wrap::after {
    background-color: transparent;
}
 ::v-deep .el-radio-button__inner {
    border-radius: 30px !important;
    border-left: 1px solid #DCDFE6;
}
.project-font{
    font-family: 'Rajdhani';
    /* font-size: 18px; */
    color: #3958cd;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.4px;
    font-weight: bold;
}
.content2 img{
    width: 389px;
    height: 258px;
}
.custom-prev,
.custom-next {
  border: 1px solid #ccc; /* 浅色边框 */
  background-color: #fff; /* 白色背景 */
  padding: 5px 10px;
  cursor: pointer;
}

    ::v-deep .el-pagination.is-background .btn-next{
      margin: 0 5px;
      background-color: white;
      color: black;
      min-width: 68px;
      height: 40px;
      border-radius: 5px;
      border:1px solid #4581ae ;
    }
    ::v-deep .el-pagination.is-background .btn-prev{
      margin: 0 5px;
      background-color: white;
      color: black;
      min-width: 68px;
      height: 40px;
      border-radius: 5px;
      border:1px solid #4581ae ;
    }
    ::v-deep .el-pager li{
        line-height: 39px;
        height: 40px;
    }

</style>