From 4ef3d1053d37de62ed7c097fb4b74434f6e67f23 Mon Sep 17 00:00:00 2001
From: zuozhengqing <a13193816592@163.com>
Date: 星期六, 23 九月 2023 15:46:17 +0800
Subject: [PATCH] “样式优化,组件拆分”
---
src/components/contactUs/contactUs.vue | 137 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 137 insertions(+), 0 deletions(-)
diff --git a/src/components/contactUs/contactUs.vue b/src/components/contactUs/contactUs.vue
new file mode 100644
index 0000000..31ad15d
--- /dev/null
+++ b/src/components/contactUs/contactUs.vue
@@ -0,0 +1,137 @@
+<!-- 鑱旂郴鎴戜滑 -->
+<template id="top" >
+ <div class="call_me_wrap" v-show="isShow">
+ <el-popover placement="left">
+ <div class="contact_information">
+ <div
+ class="contact_top"
+ style="display: flex; align-items: center; justify-content: left"
+ >
+ <div class="telephone_left">
+ <i class="el-icon-phone-outline" style="font-size:26px;padding-right:20px"></i>
+ </div>
+ <div class="telephone_right" style="cursor: pointer;">
+ <h4>鍞墠鍜ㄨ鐢佃瘽</h4>
+ <p style="color: #fa640a">010-84155885</p>
+ </div>
+ </div>
+ <div
+ class="contact_top"
+ style="display: flex; align-items: center; justify-content: left;padding-bottom:30px;margin-top:30px"
+ >
+ <div class="telephone_left">
+ <i class="el-icon-edit-outline" style="font-size:26px;padding-right:20px"></i>
+ </div>
+ <div class="telephone_right" style="cursor: pointer;">
+ <h4>鑱嗗惉 路 寤鸿鍙嶉</h4>
+ <p >璐濇�濈涓嶆槸瀹岀編鐨勶紝鎴戜滑娓存湜鎮ㄧ殑寤鸿</p>
+ </div>
+ </div>
+ </div>
+ <el-button slot="reference" @click="visible = !visible" :aria-hidden="true">
+ <i class="el-icon-chat-square"></i>
+ <p>鑱�</p>
+ <p>绯�</p>
+ <p>鎴�</p>
+ <p>浠�</p>
+ </el-button>
+ </el-popover>
+ <a href="#top">
+ <div class="go_top">
+ <i class="el-icon-arrow-up"></i>
+ </div>
+ </a>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {},
+ data() {
+ return {
+ visible: false,
+ isShow: false,
+ };
+ },
+ computed: {},
+ created() {},
+ mounted() {
+ window.addEventListener("scroll", () => {
+ if (window.scrollY >= window.innerHeight) {
+ this.isShow = true;
+ } else {
+ this.isShow = false;
+ }
+ });
+ },
+ watch: {},
+ methods: {
+ goTop() {
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+ },
+ },
+ components: {},
+};
+</script>
+
+<style scoped lang="scss">
+* {
+ margin: 0;
+ padding: 0;
+}
+::v-deep .el-button {
+ flex: 1;
+ display: block;
+ height: 140px;
+ width: 40px;
+ padding: 0;
+ white-space: normal;
+ box-sizing: border-box;
+ font-size: 16px;
+ color: #fa640a ;
+ margin: 0 auto;
+ background: #FFFFFF;
+ i {
+ font-size: 20px;
+ }
+ p {
+ padding: 5px;
+ }
+
+ // span{
+ // display: block;
+ // text-align: center;
+ // width: 30px;
+ // }
+}
+::v-deep .el-button:hover{
+ background: #FA640A;
+ color: #fff;
+}
+.call_me_wrap {
+ position: fixed;
+ right: 20px; /* 璁剧疆鍏冪礌璺濈椤堕儴鐨勮窛绂� */
+ bottom: 180px; /* 璁剧疆鍏冪礌璺濈宸︿晶鐨勮窛绂� */
+ width: 40px;
+ height: 200px;
+ .go_top {
+ width: 40px;
+ height: 40px;
+ margin-top: 20px;
+ text-align: center;
+ line-height: 40px;
+ border: 0.5px solid #ccc;
+ border-radius: 5px;
+ box-sizing: border-box;
+ cursor: pointer;
+ i {
+ font-size: 20px;
+ color: #fa640a;
+ font-weight: bold;
+ }
+ }
+}
+</style>
--
Gitblit v1.8.0