539 lines
14 KiB
Vue
539 lines
14 KiB
Vue
<template xmlns="http://www.w3.org/1999/html">
|
|
<div>
|
|
<div v-if="showHomeAndroid == false" class="contact_view">
|
|
<div class="contact_view_title">联系我们</div>
|
|
<div class="contact_view_bar"></div>
|
|
|
|
<form action="https://formspree.io/f/mrbzdeeg">
|
|
<div class="contact_view_form">
|
|
<div class="form_title">请留下您的联系方式</div>
|
|
<div class="row">
|
|
<div class="label_input">
|
|
<label for="qq">QQ</label><input id="qq" type="text" name="qq"/>
|
|
</div>
|
|
<div class="label_input">
|
|
<label for="wx">微信</label
|
|
><input id="wx" type="text" name="微信"/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="label_input">
|
|
<label for="phone">手机号码</label
|
|
><input id="phone" type="text" name="手机号码"/>
|
|
</div>
|
|
<div class="label_input">
|
|
<label for="email">邮箱</label
|
|
><input id="email" type="text" name="email"/>
|
|
</div>
|
|
</div>
|
|
<div class="disp">
|
|
<div class="alert">请至少选择一种</div>
|
|
<button class="form_btn" type="submit">完成</button>
|
|
</div>
|
|
</div>
|
|
<div class="contact_view_message">
|
|
<div class="contact_view_message_div">
|
|
<div class="bg">
|
|
<textarea name="留言" type="text"></textarea>
|
|
<div class="message_title">留言板</div>
|
|
</div>
|
|
</div>
|
|
<div class="contact_view_message_btn">
|
|
<button class="message_btn" type="submit">保存草稿</button>
|
|
<button class="message_btn2" type="submit">发送留言</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="cantact">
|
|
<div class="cantact_bar"></div>
|
|
<div class="cantact_item">
|
|
<div @mouseenter="ShowBOX(i.title)"
|
|
@mouseleave="IsShowBOX(i.title)" v-for="i in cantact_Icon_List" class="contact_item_box">
|
|
<a :href="i.url">
|
|
<div style="width: 100%; height: 100%"><img :src="i.icon" alt=""/></div>
|
|
</a>
|
|
<div v-if="i.imgshow" class="IMGBOX">
|
|
<img :src="i.img" alt="i.title">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="showHomeAndroid == true" class="contact_view_android">
|
|
<div class="logo_center">
|
|
<img src="@/assets/contact_android/raylinx_white.png" alt="raylinx.com">
|
|
</div>
|
|
<div class="contact_form_div">
|
|
<form action="https://formspree.io/f/mrbzdeeg">
|
|
<div class="contact_form_div_title">联系我们Contact Us</div>
|
|
<div class="contact_form_div_textarea">
|
|
<div class="bg_input">
|
|
<div class="input_box">
|
|
<label for="qq"><span>Q</span><span class="label_span_right">Q</span></label><input id="qq" type="text"
|
|
name="qq"/>
|
|
</div>
|
|
<div class="input_box">
|
|
<label for="wexin"><span>微</span><span class="label_span_right">信</span></label><input id="wexin"
|
|
type="text"
|
|
name="微信"/>
|
|
</div>
|
|
<div class="input_box">
|
|
<label for="phone">手机号码</label><input id="phone" type="text" name="phone"/>
|
|
</div>
|
|
<div class="input_box">
|
|
<label for="email"><span>邮</span><span class="label_span_right">箱</span></label><input id="email"
|
|
type="text"
|
|
name="email"/>
|
|
<div type="submit" class="input_btn">完成</div>
|
|
</div>
|
|
</div>
|
|
<div class="message_title2">请留下您的联系方式</div>
|
|
</div>
|
|
<div class="contact_form_div_textarea">
|
|
<div class="bg">
|
|
<textarea name="留言" type="text"></textarea>
|
|
<div class="message_title">留言板</div>
|
|
<div class="textarea_btn_box">
|
|
<div type="submit" class="textarea_btn btn-left">保存草稿</div>
|
|
<div type="submit" class="textarea_btn btn-right">发送留言</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
showHomeAndroid: false,
|
|
screenWidth: null,
|
|
cantact_Icon_List: [
|
|
{index: "1", icon: require("@/assets/Home_IMG/TG1.png"), url: "https://t.me/raylinxjim"},
|
|
{
|
|
index: "2",
|
|
icon: require("@/assets/cases/pay1.png"),
|
|
url: "/contact",
|
|
title: "微信",
|
|
img: require("@/assets/widgetApp/weixi.png"),
|
|
imgshow: false,
|
|
},
|
|
{
|
|
index: "3",
|
|
icon: require("@/assets/Home_IMG/whatsApp1.png"),
|
|
url: "https://api.whatsapp.com/send/?phone=12125188846&text&type=phone_number&app_absent=0t",
|
|
},
|
|
{
|
|
index: "4",
|
|
icon: require("@/assets/Home_IMG/fb2.png"),
|
|
url: "https://www.facebook.com/profile.php?id=61565734855142"
|
|
},
|
|
{index: "5", icon: require("@/assets/pricing/twiite.png"), url: "/contact"},
|
|
{index: "5", icon: require("@/assets/pricing/whatsApp.png"), url: "https://api.whatsapp.com/send/?phone=12125188846&text&type=phone_number&app_absent=0"},
|
|
{index: "5", icon: require("@/assets/pricing/email.png"), url: "/contact"},
|
|
{index: "5", icon: require("@/assets/pricing/ins.png"), url: "https://www.instagram.com/raylinxcloud/"},
|
|
],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.screenWidth = document.body.clientWidth;// 在客户端设置
|
|
window.onresize = () => {
|
|
return (() => {
|
|
this.screenWidth = document.body.clientWidth;
|
|
})();
|
|
};
|
|
},
|
|
methods: {
|
|
ShowBOX(title) {
|
|
for (let i = 0; i < this.cantact_Icon_List.length; i++) {
|
|
if (this.cantact_Icon_List[i].title === title && this.cantact_Icon_List[i].img != null) {
|
|
this.cantact_Icon_List[i].imgshow = true;
|
|
} else if (this.cantact_Icon_List[i].title === title) {
|
|
this.cantact_Icon_List[i].imgshow = false;
|
|
}
|
|
}
|
|
},
|
|
IsShowBOX(title) {
|
|
for (let i = 0; i < this.cantact_Icon_List.length; i++) {
|
|
if (this.cantact_Icon_List[i].title === title && this.cantact_Icon_List[i].img != null) {
|
|
this.cantact_Icon_List[i].imgshow = false;
|
|
break; // Stop the loop once the correct item is found and processed
|
|
}
|
|
}
|
|
},
|
|
bodyScale() {
|
|
var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
|
|
if(devicewidth<=1600){
|
|
var scale = devicewidth / 1600; // 分母——设计稿的尺寸
|
|
document.body.style.zoom = scale; //放大缩小相应倍数
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
screenWidth: {
|
|
handler: function (val) {
|
|
if (val >= 800) {
|
|
this.bodyScale();
|
|
this.showHomeAndroid = false;
|
|
} else if (val < 800) {
|
|
this.showHomeAndroid = true;
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.contact_view_android {
|
|
background: url("@/assets/contact_android/contact_bg.jpg") no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 1000px;
|
|
//padding-top: 3%;
|
|
|
|
.logo_center {
|
|
width: 200px;
|
|
height: 200px;
|
|
margin: 0 auto;
|
|
padding-top: 12%;
|
|
|
|
img {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
.contact_form_div {
|
|
margin-top: 20%;
|
|
}
|
|
|
|
.contact_form_div_title {
|
|
color: #ffffff;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.contact_form_div_textarea {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
|
|
.message_title2 {
|
|
color: #1f8fcc;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
|
}
|
|
|
|
.bg_input {
|
|
background: rgba(255, 255, 255, 0.59);
|
|
width: 100%;
|
|
min-height: 150px;
|
|
position: relative;
|
|
margin-top: 15%;
|
|
padding: 12px 24px 24px 24px;
|
|
|
|
.input_box {
|
|
margin-top: 15px;
|
|
display: flex;
|
|
|
|
label {
|
|
width: 75px;
|
|
display: block;
|
|
color: #1f8fcc;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
input {
|
|
border: none;
|
|
background: #1f8fcc;
|
|
padding: 5px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.input_btn {
|
|
background: #1f8fcc;
|
|
color: #ffffff;
|
|
width: 70px;
|
|
height: 30px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.label_span_right {
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bg {
|
|
background: #ffffff52;
|
|
width: 100%;
|
|
height: 200px;
|
|
position: relative;
|
|
|
|
textarea {
|
|
background: #ffffff52;
|
|
border: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.textarea_btn_box {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.textarea_btn {
|
|
background: #ffffff;
|
|
border: none;
|
|
color: #00bbff;
|
|
width: 100px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.btn-left {
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
.btn-right {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
.message_title {
|
|
position: absolute;
|
|
bottom: 10%;
|
|
left: 40%;
|
|
color: #00bbff6b;
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.disp {
|
|
display: flex;
|
|
}
|
|
|
|
.contact_view {
|
|
width: 100%;
|
|
min-height: 600px;
|
|
padding-top: 7%;
|
|
|
|
.contact_item_box {
|
|
position: relative;
|
|
}
|
|
|
|
.IMGBOX {
|
|
width: 150px;
|
|
height: 150px;
|
|
box-shadow: 0px 4px 10px rgba(79, 79, 79, 0.726);
|
|
position: absolute;
|
|
top: -150px;
|
|
left: -30px;
|
|
img {
|
|
width: 150px !important;
|
|
height: 150px !important;
|
|
}
|
|
}
|
|
|
|
&_title {
|
|
font-size: 30px;
|
|
text-align: center;
|
|
//line-height: 2;
|
|
margin-bottom: 1%;
|
|
}
|
|
|
|
&_bar {
|
|
background: rgb(0, 157, 255);
|
|
width: 40%;
|
|
height: 3px;
|
|
margin: 0 auto 2% auto;
|
|
}
|
|
|
|
&_form {
|
|
background-color: #027bff;
|
|
width: 50%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
|
|
.form_title {
|
|
color: #fff;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
line-height: 2;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
margin: 1% auto 3% auto;
|
|
width: 70%;
|
|
}
|
|
|
|
.alert {
|
|
width: 200px;
|
|
margin: 0 auto;
|
|
color: #fff;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.form_btn {
|
|
background-color: #fff;
|
|
border: none;
|
|
color: #027bff;
|
|
padding: 2px 10px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 5px;
|
|
}
|
|
|
|
.label_input {
|
|
// margin-right: 50px;
|
|
display: flex;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
color: #fff;
|
|
text-align: right;
|
|
width: 70px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
input {
|
|
border: none;
|
|
padding: 3px;
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.message_title {
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
color: #027bff;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.message_btn {
|
|
display: block;
|
|
border-radius: 0;
|
|
border: none;
|
|
background-color: #027bff;
|
|
padding: 5px 20px;
|
|
margin-top: 10px;
|
|
color: #fff;
|
|
position: absolute;
|
|
bottom: 35px;
|
|
right: 15%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.message_btn2 {
|
|
display: block;
|
|
border-radius: 0;
|
|
border: none;
|
|
background-color: #027bff;
|
|
padding: 5px 20px;
|
|
margin-top: 10px;
|
|
color: #fff;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 15%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&_message {
|
|
width: 50%;
|
|
margin: 2% auto 2% auto;
|
|
display: flex;
|
|
position: relative;
|
|
|
|
.contact_view_message_div {
|
|
width: 70%;
|
|
min-height: 300px;
|
|
box-shadow: 0px 4px 10px rgba(0, 213, 255, 0.726);
|
|
|
|
.bg {
|
|
width: 100%;
|
|
min-height: 300px;
|
|
|
|
opacity: 0.5; /* 设置透明度，使背景图片变淡 */
|
|
position: relative;
|
|
|
|
textarea {
|
|
width: 100%;
|
|
height: 300px;
|
|
box-sizing: border-box;
|
|
background-image: url("@/assets/pricing/kefu.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 55% 70%;
|
|
background-position: 12px 100%;
|
|
background-color: #fff;
|
|
border: none;
|
|
resize: none; /* 禁止用户调整大小 */
|
|
overflow: auto; /* 当内容超出时，自动显示滚动条 */
|
|
white-space: pre-wrap; /* 保留空格和换行符，文本自动换行 */
|
|
word-wrap: break-word; /* 允许在单词内部进行换行 */
|
|
word-break: break-all; /* 在任何字符之间进行换行 */
|
|
padding: 12px;
|
|
}
|
|
|
|
textarea:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cantact {
|
|
&_bar {
|
|
height: 3px;
|
|
width: 50%;
|
|
background-color: rgb(0, 157, 255);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.cantact_item {
|
|
display: flex;
|
|
width: 58%;
|
|
margin: 1% auto;
|
|
|
|
div {
|
|
margin: 0 2% 0 2%;
|
|
}
|
|
|
|
img {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|