caimei365
/
caimei365-www


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
							<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://www.thymeleaf.org ">
<head>
    <title>采美365网-品牌招商介绍</title>
    <template th:replace="components/head-link"></template>
    <style type="text/css">
        /** PC */
        @media screen and (min-width:768px){#investment .wrap{width:1184px;margin:0 auto -30px auto}
            #investment .wrap img{display:block;width:100%}
            #investment .wrap .btn{position:fixed;right:50%;margin-right:-510px;width:235px;top:200px}
            #investment .wrap .btn a{display:block;width:235px;height:45px;margin-bottom:16px}
            #investment .more{background:url(/img/investment/pc_more.png) no-repeat center center}
            #investment .back{background:url(/img/investment/pc_back.png) no-repeat center center}
            #investment .down{background:url(/img/investment/pc_download.png) no-repeat center center}
        }
        /** 移动端 */
        @media screen and (max-width:768px){#investment .wrap{width:100vw;margin:0 auto;position:relative}
            #investment .wrap img{display:block;width:100%}
            #investment .wrap .btn{position:absolute;left:23vw;bottom:4vw}
            #investment .wrap .btn a{display:inline-block;width:54vw;height:12vw;background-size:100%}
            #investment .more{background:url(/img/investment/pc_more.png) no-repeat center center}
            #investment .back{background:url(/img/investment/pc_back.png) no-repeat center center}
            #investment .down{background:url(/img/investment/pc_download.png) no-repeat center center}
        }
    </style>
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 品牌招商介绍 -->
<div id="investment">
    <div class="wrap">
        <div v-if="isPC">
            <template v-if="firstPage">
                <img src="/img/investment/pc_1.jpg">
                <img src="/img/investment/pc_2.jpg">
                <img src="/img/investment/pc_3.jpg">
                <div class="btn">
                    <a href="javascript:void(0);" class="more" @click="showMore()"></a>
                    <a href="javascript:void(0);" class="down" @click="toDownload()"></a>
                </div>
            </template>
            <template v-else>
                <img src="/img/investment/pc_4.jpg">
                <div class="btn">
                    <a href="javascript:void(0);" class="back" @click="goBack()"></a>
                    <a href="javascript:void(0);" class="down" @click="toDownload()"></a>
                </div>
            </template>
        </div>
        <div v-else>
            <template v-if="firstPage">
                <img src="/img/investment/h5_1.jpg">
                <img src="/img/investment/h5_2.jpg">
                <img src="/img/investment/h5_3.jpg">
                <div class="btn">
                    <a href="javascript:void(0);" class="more" @click="showMore()"></a>
                </div>
            </template>
            <template v-else>
                <img src="/img/investment/h5_4.jpg">
                <img src="/img/investment/h5_5.jpg">
                <div class="btn">
                    <a href="javascript:void(0);" class="back" @click="goBack()"></a>
                </div>
            </template>
        </div>
    </div>
</div>

<!-- 引入底部 -->
<template th:replace="components/footer"></template>
<template th:replace="components/foot-link"></template>
<script type="text/javascript">
var investment = new Vue({
    el: "#investment",
    data: {
        firstPage: true
    },
    methods: {
        showMore: function(){
            $("html,body").animate({scrollTop:0},500);
            this.firstPage = false;
        },
        goBack: function(){
            $("html,body").animate({scrollTop:0},500);
            this.firstPage = true;
        },
        toDownload: function(){
            window.location.href = $.get("investment/export");
        }
    }
});
</script>
</body>
</html>