en_m_lmlqmill_templates
/
contact.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lmlq Mill</title>
    <link rel="stylesheet" href="./css/muse-ui.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/publiic.css">
    <link rel="stylesheet" href="./css/contact.css">
</head>

<body id="index">
    <div id="app">
        <!-- 头部 -->
        <header>
            <div class="head-nav">
                <mu-row>
                    <mu-col span="2" class="logo">
                        <div class="grid-cell">
                            <a href="./index.html" target="index">
                                <img src="./img/left.png" alt="logo">
                            </a>
                        </div>
                    </mu-col>
                    <mu-col span="8" class="page-nav">
                        <div class="nav-title">
                            <span>Home > <strong>Contacts</strong></span>
                        </div>
                    </mu-col>
                    <mu-col span="2" class="index-menu">
                        <div class="grid-cell">
                            <mu-menu cover placement="left" :open.sync="open">
                                <mu-button icon>
                                    <img src="./img/list_icon2.png" alt="">
                                </mu-button>
                                <mu-list slot="content">
                                    <mu-list-item button href="index.html">
                                        <mu-list-item-title>Home</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="products_l.html">
                                        <mu-list-item-title>Products</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="case_l.html">
                                        <mu-list-item-title>Case</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="news_l.html">
                                        <mu-list-item-title>News</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="about.html">
                                        <mu-list-item-title>About</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="contact.html">
                                        <mu-list-item-title>Contact us</mu-list-item-title>
                                    </mu-list-item>
                                </mu-list>
                            </mu-menu>
                        </div>
                    </mu-col>
                </mu-row>
            </div>
        </header>
        <!-- banner -->
        <div class="head-banner">
            <img class="main-img" src="./img/contact_banner.jpg">
            <div class="sec-img c-num">
                <img src="./img/c_banner_bg.jpg">
                <mu-row class="ad-box">
                    <mu-col span="2" class="dizhi">
                        <img src="./img/youxiang3.png">
                    </mu-col>
                    <mu-col span="10">
                        <p><span>Email:</span> [email protected]</p>
                    </mu-col>
                </mu-row>
            </div>
            <div class="sec-img address">
                <img src="./img/c_banner_bg2.jpg">
                <mu-row class="ad-box">
                    <mu-col span="2" class="dizhi">
                        <img src="./img/dizhi.png" alt="">
                    </mu-col>
                    <mu-col span="10">
                        <p>No.169, Science (Kexue) Avenue,
                            National HI-TECH Industry Development Zone, Zhengzhou, China</p>
                    </mu-col>
                </mu-row>
            </div>
        </div>
        <!-- 内容 -->
        <article>
        </article>
        <!-- 底部 -->
        <footer>
            <!-- 联系我们 -->
            <div class="form-box">
                <div class="form-banner">
                    <img src="./img/form_banner.png" alt="">
                </div>
                <div class="form-inquery">
                    <mu-form id="msgForm" ref="form" :model="validateForm" class="mu-demo-form">
                        <mu-form-item :rules="nameRules" prop="name">
                            <mu-text-field v-model="validateForm.name" placeholder="Full Name" class="input1">
                            </mu-text-field><br />
                        </mu-form-item>
                        <mu-form-item :rules="telRules" prop="number">
                            <mu-text-field v-model="validateForm.number" type="number" placeholder="Call Number"
                                class="input2"></mu-text-field><br />
                        </mu-form-item>
                        <mu-form-item :rules="messageRules" prop="message" class="messa">
                            <mu-text-field v-model="validateForm.message" multi-line :rows="4"
                                placeholder="If you would like to share more information about your project, such as application field, product size, equipment purchase time…，please leave message here."
                                class="input3"></mu-text-field><br />
                        </mu-form-item>
                        <mu-form-item>
                            <mu-button @click="submit">ORDER NOW</mu-button>
                        </mu-form-item>
                    </mu-form>
                </div>
            </div>

            <div class="foot-chat">
                <a class="chat-link" href="#">
                    <img src="./img/chat_icon.png">
                    <span>Chat Online</span>
                </a>
            </div>
        </footer>
    </div>
</body>
<script src="./js/vue.min.js"></script>
<script src="./js/muse-ui.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                open: false,
                active3: 0,
                validateForm: {
                    name: '',
                    number: '',
                    message: ''
                },
                rules: [{
                    validate: (val) => !!val,
                    message: 'Cannot be empty'
                }],
                nameRules: [{
                        validate: (val) => !!val,
                        message: 'Name cannot be empty'
                    },
                    {
                        validate: (val) => val.length >= 3,
                        message: 'The length of user name is greater than 3'
                    }
                ],
                telRules: [{
                        validate: (val) => !!val,
                        message: 'Phone number cannot be empty'
                    },
                    {
                        validate: (val) => val.length >= 3 && val.length < 12,
                        message: 'Phone number format error'
                    }
                ],
                messageRules: [{
                        validate: (val) => !!val,
                        message: 'Message cannot be empty'
                    },
                    {
                        validate: (val) => val.length >= 3,
                        message: 'The length of message is greater than 3'
                    }
                ],
            }
        },
        methods: {
            submit() {
                this.$refs.form.validate().then((result) => {
                    if (result) {
                        document.querySelector('#msgForm').submit()
                    }
                });
            },
        }
    });
</script>

</html>