feiyang-web/src/views/contactus.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="height: 80px;"></div>
        <div class="content">
            <div class="bg" >
                    <div class="slogan wow fadeInUp animated" style="animation-delay: 0.1s; visibility: visible; animation-name: fadeInUp;">
                        <h3>为客户创造价值</h3>
                        <h5>CREATING VALUE</h5>
                    </div>
                    <div class="text wow fadeInUp animated" style="animation-delay: 0.3s; visibility: visible; animation-name: fadeInUp;">
                        <h3>飞阳建筑工程有限公司</h3>
                       <p>地址：福建省莆田市荔城区荔园中路西侧50米飞阳建设工程有限公司(香槟国际)
</p>
<p>电话：05943613551</p>
<p>传真：05943613551</p>
<p>邮箱：1053059120@qq.com</p>
<p class="no_margin">网址：https://www.fygroup.cn
</p>
                    </div>
                     <div class="float">
                        <div class="introduction wow fadeInRight animated" style="animation-delay: 0.5s; visibility: visible; animation-name: fadeInRight;">
                            <h3>关注飞阳建筑工程</h3>
                            <h5>FOLLOW US</h5>
                            <p class="no_margin">关注我们的社交帐号</p>
                        </div>
                        <!-- <div class="socials_wrap">
                            <a href="javascript:;" class=""><span class="social_icon social_icon_wechat">
                                    <div class="weChat_img"><img src="../images/wechat_bg.jpg"></div>
                                </span></a>
                            <a href="javascript:;" class="on"><span class="social_icon social_icon_video">
                                    <div class="weChat_img"><img src="../images/video_bg.jpg"></div>
                                </span></a>
                            <a href="javascript:;" class=""><span class="social_icon social_icon_blog">
                                    <div class="weChat_img"><img src="../images/blog_bg.jpg"></div>
                                </span></a>
                            <a href="javascript:;"><span class="social_icon social_icon_applet">
                                    <div class="weChat_img"><img src="../images/applet_bg.jpg"></div>
                                </span></a>
                        </div> -->
                       <img src="@/assets/images/weixin.png" style="width: 100%;">
                    </div>
                </div>
<div style="height: 85px;"></div>
<div>
    <div style="background-color: rgb(232,232,232);padding: 8px 15px;border-radius: 14px 14px 0 0;display: flex;">
    <img src="@/assets/images/留言图标.png" style="width: 40;object-fit: contain;">
    <p style="margin-left: 20px;font-size: 20px;color:rgb(48,113,183) ;">留言联系</p>
    
    </div>
    <div style="width: 90%;margin: auto;">
    <p style="padding: 25px 0;border-bottom: 1px solid rgba(0,0,0,.2);">若您有合作意向，请您为我们留言或使用上面方式联系我们，我们将尽快给你回复，并为您提供最真诚的服务，谢谢。
</p>
<div style="height: 30px;"></div>
<div style="display: flex;justify-content: space-between;">
    <div style="width: 45%;">
    <el-input style="margin-bottom: 20px;" v-model="input1" placeholder="联系人"></el-input>
    <el-input style="margin-bottom: 20px;" v-model="input2" placeholder="电话"></el-input>
    <el-input v-model="input3" placeholder="邮箱"></el-input>
</div>
<div style="width: 50%;height: 100%;">
    <el-input
    style="height: 100%;"
  type="textarea"
  :autosize="{ minRows: 7, maxRows: 22}"
  placeholder="留言内容"
  v-model="textarea2">
</el-input>
<div style="height: 10px;"></div>
<div style="display: flex;justify-content: end;"><el-button type="primary">发送留言</el-button></div>
</div>
</div>
    </div>
</div>
        </div>
<div style="height: 60px;"></div>
    </div>

</template>
<script>
</script>
<style scoped>
.content{
    width: 80%;
    margin:auto
}
.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;
}
::v-deep .el-input__inner{
    background-color: rgb(240,240,240);
}
.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;
}

.bg{
    background-image: url('@/assets/images/cantactus.png');
    position: relative;
    width: 100%;
    height: 542px;
 
    background-size: cover;
    border-radius: 14px;
    -webkit-border-radius: 14px;
}
.slogan {
    position: absolute;
    top: 94px;
    left: 72px;
}
 .slogan h3 {
    font-size: 60px;
    color: #ffffff;
    line-height: 1;
    font-weight: lighter;
    letter-spacing: 42px;
    margin: initial;
}
.slogan h5 {
    font-family: 'Rajdhani';
    font-size: 36px;
    color: #ffffff;
    color: rgba(48,113,183, .5);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.4px;
    margin-top: 8px;
}
.text {
    position: absolute;
    bottom: 60px;
    left: 72px;
}
.text h3 {
    font-size: 24px;
    color: #3c3c48;
    margin-bottom: 14px;

}
 .text p {
    font-size: 15px;
    color: #44526a;
    line-height: 24px;
}

p {
    font-size: 14px;
    color: #95959d;
    line-height: 24px;
    text-align: justify;
}
.no_margin {
    margin-bottom: 0 !important;
}
 .float {
    position: absolute;
    height: 100%;
    right: 0px;
    background-color: rgb(242,242,242);
    padding: 42px 44px 145px 44px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.float h5{
    color: rgb(48,113,183);
}
 .float .introduction {
    margin-bottom: 10px;
}
.foot_section .links_list, .socials_wrap {
    display: inline-block;
    vertical-align: top;
}
</style>