|
- <template>
- <div id="footer">
- <div class="content">
- <img src="@/assets/footer_logo.png" class="lflogo">
- <div id="lcenter">
- <div class="code">
- <img src="@/assets/wechat.png">
- <a>关注公众号</a>
- </div>
- <div class="code">
- <img src="@/assets/wechat.png">
- <a>关注公众号</a>
- </div>
- <!-- <div id="ylink">
- <div class="link">
- <h4>友情链接</h4>
- <div class="llink">
- <a v-for="(item, index) in linkdata" :key="index">{{ item.label }}</a>
- </div>
- </div>
- <div class="link">
- <h4>关于我们</h4>
- <div class="llink about">
- <a v-for="(item, index) in about" :key="index">{{ item.label }}</a>
- </div>
- </div>
- </div> -->
- </div>
- <div class="gs">{{ Copyright }}</div>
- <!-- <div id="fright">
- <img src="@/assets/wechat.png">
- <a>关注公众号</a>
- </div> -->
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'yqfooters',
- data () {
- return {
- linkdata: [
- { label: '汽车之家', link: '' },
- { label: '懂车帝', link: '' },
- { label: '爱卡汽车', link: '' },
- { label: '腾讯', link: '' },
- { label: '腾讯', link: '' }
- ],
- about: [
- { label: '关于我们', link: '' },
- { label: '联系我们', link: '' },
- { label: '商务合作', link: '' },
- { label: '服务条款', link: '' }
- ],
- Copyright: 'Copyright © 2023 北京智阅网络科技有限公司 All Rights Reserved'
- }
- },
- components: {}
- }
- </script>
- <style lang="scss" scoped>
- #footer {
- width: 100%;
- height: 330px;
- background: #181818;
- position: relative;
- background-image: url('../assets/footer_left.png');
- background-position: 0% -185px; /* 调整这些值来改变显示的部分 */
- background-size: 40% 145%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
- background-repeat: no-repeat;
- display: flex;
- align-items: center;
- justify-content: center;
- .content{
- width: 1200px;
- margin: 0 auto;
- }
- .lflogo {
- width: 184px;
- margin-right: 100px;
- float: left;
- }
-
- #lcenter {
- // display: flex;
- // flex-direction: column;
- float: left;
- margin-left: 10%;
- #ylink {
- display: flex;
- .link {
- width: 250px;
- color: #fff;
- h4 {
- text-align: left;
- margin: 0px !important;
- padding-bottom: 20px;
- font-size: 16px;
- font-weight: 400;
- border-bottom: 1px solid #d7d7d746;
- }
- .llink {
- width: 80%;
- text-align: left;
- a {
- font-size: 14px;
- font-weight: 400;
- color: #ffffff60;
- display: inline-block;
- margin: 10px 5px 10px 0;
- cursor: pointer;
- }
- }
- .about {
- width: 60%;
- a {
- margin: 10px 15px 10px 0;
- }
- }
- }
- .link:first-child {
- margin-right: 50px;
- }
- }
- .code{
- display: inline-block;
- margin: 0 30px;
- a {
- margin-top: 6px;
- display: block
- }
- }
- }
- .gs {
- clear: both;
- font-size: 12px;
- font-weight: 400;
- color: #333336;
- padding-top: 40px;
- }
- #fright {
- display: flex;
- flex-direction: column;
- a {
- font-size: 14px;
- font-weight: 400;
- color: #FFFFFF;
- margin-top: 10px;
- }
- }
- }
- </style>
|