cocorobo/pages/download.vue

<script setup>
import { ref, onMounted } from 'vue';

const System1= ref("")
const selectList1Windows = ref([{
    id: 0,
    value: "https://cocorobo.cn/downloads/CocoBlocklyUploaderInstallerv3.0.12.exe",
    name: "v3.0.12"
},])
const selectList2Mac = ref([
    {
        id: 0,
        value: "https://cocorobo.cn/downloads/CocoBlocklyUploaderInstallerv3.0.12.pkg",
        name: "v3.0.12"
    },
])
const blocklyiVersion = ref("")
const blocklyLink = ref("")
const blocklyList =ref("")
const System2= ref("")
const AIoTVersionWindows = ref([
    {
        id: 0,
        value: "https://cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.1.0.exe",
        name: "v1.1.0"
    }, {
        id: 1,
        value: "https://cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.0.18.exe",
        name: "v1.0.18"
    }
])
const AIoTVersionMac = ref([
    {
        id: 0,
        value: "https://cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.1.1.pkg",
        name: "v1.1.1"
    },
    {
        id: 1,
        value: "https://cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.1.0.pkg",
        name: "v1.1.0"
    }, {
        id: 2,
        value: "https://cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.0.18.pkg",
        name: "v1.0.18"
    }
])
const AIoTVersion = ref("")
const AIoTVersionList = ref([])
const AIoTLink = ref("")

onMounted(() => {
    const isSystem = /macintosh|mac os x/i.test(navigator.userAgent)
    if (isSystem) {
        System1.value = "Mac"
        System2.value = "Mac"
        blocklyList.value = selectList2Mac.value
        AIoTVersionList.value = AIoTVersionMac.value
    } else {
        System1.value = "Windows"
        System2.value = "Windows"
        blocklyList.value = selectList1Windows.value
        AIoTVersionList.value = selectList1Windows.value
    }
    AIoTVersion.value = AIoTVersionList.value[0].name
    AIoTLink.value = AIoTVersionList.value[0].value
    blocklyiVersion.value = blocklyList.value[0].name
    blocklyLink.value = blocklyList.value[0].value
})
const selectSystem1 = (e) => {
    console.log(e.target.value == "Mac")
    if (e.target.value == "Mac") {
        System1.value = "Mac"
        blocklyList.value = selectList2Mac.value
    } else {
        System1.value = "Windows"
        blocklyList.value = selectList1Windows.value
    }
    blocklyiVersion.value = blocklyList.value[0].name
    blocklyLink.value = blocklyList.value[0].value
    console.log(blocklyList.value[0])
}

const selectSystem2 = (e) => {
    if (e.target.value == "Mac") {
        System2.value = "Mac"
        AIoTVersionList.value = AIoTVersionMac.value
    } else {
        System2.value = "Windows"
        AIoTVersionList.value = AIoTVersionWindows.value
    }
    AIoTVersion.value = AIoTVersionList.value[0].name
    AIoTLink.value = AIoTVersionList.value[0].value
}

const selectBlocklyVersion = (e) => {
    blocklyLink.value = blocklyList.value.find(x => x.name == e.target.value).value
}
const BlocklyDownload = () => {
    console.log(blocklyLink)
}
const selectAIoTVersion = (e) => {
    console.log(e.target.value)
    AIoTLink.value = AIoTVersionList.value.find(x => x.name == e.target.value).value
}
const AIoTDownload = () => {
    console.log(AIoTLink)
}
</script>
<template>
    <div class="download">
        <h1>离线编程软件</h1>
        <div class="download-content content">
            <img src="../assets/img/cocorobolixianban.png" alt="">
            <div class="download-content-desc">
                <h3>CocoPi 图形化编程离线版本</h3>
                <p>为了能够让用户更方便的使用该产品，在网络较慢或者其他情况下，可以更好使用。</p>
                <h5>支持的操作系统：</h5>
                <span>windows</span>
            </div>
            <div class="download-content-download">
                <a href="https://cocorobo.cn/downloads/CocoRoboPiDeskTop Installer v1.0.3.exe">下载 CocoPi
                    图形化编程离线版本（v1.0.3）</a>
                <p>更新与2024/05/22</p>
            </div>
        </div>
        <div class="download-content content">
            <img src="../assets/img/cocorobolixianban2.png" alt="">
            <div class="download-content-desc">
                <h3>AIoT 图形化编程离线版本</h3>
                <p>为了能够让用户更方便的使用该产品，在网络较慢或者其他情况下，可以更好使用。</p>
                <h5>支持的操作系统：</h5>
                <span>windows</span>
            </div>
            <div class="download-content-download">
                <a href="https://cocorobo.cn/downloads/CocoRoboXDeskTop Installer v1.0.8.exe">下载 AIoT
                    图形化编程离线版本（v1.0.8）</a>
                <p>更新与2024/04/09</p>
            </div>
        </div>
        <div class="download-content content">
            <img src="../assets/img/blocklylixian.png" alt="">
            <div class="download-content-desc">
                <h3>百变智造图形化编程离线版本</h3>
                <p>为了能够让用户更方便的使用该产品，在网络较慢或者其他情况下，可以更好使用。</p>
                <h5>支持的操作系统：</h5>
                <span>windows</span>
            </div>
            <div class="download-content-download">
                <a
                    href="https://cocorobo.cn/downloads/CocoBlockly%20Desktop%20Installer%20v3.0.7.exe">下载百变智造图形化编程离线版本（v3.0.7）</a>
                <p>更新与2024/04/09</p>
            </div>
        </div>
        <h1>图形化编程上传插件</h1>
        <div class="download-content content">
            <img src="../assets/img/blockly1.png" alt="">
            <div class="download-content-desc">
                <h3>百变智造图形化编程平台上传插件</h3>
                <p>为了能够让百变智造图形化编程平台能够从浏览器和主控模块进行通信，我们推出一款跨平台的上传插件（Uploader），用户下载该插件并安装，随后即可访问
                    CocoBlockly，对我们的电子模块进行上传编程。</p>
                <h5>支持的操作系统：</h5>
                <span>Windows / macOS</span>
            </div>
            <div class="download-content-download">
                <div>
                    <span>系统：</span>
                    <select name="" id="" :value="System1" @change="selectSystem1">
                        <option value="Windows">Windows</option>
                        <option value="Mac">Mac</option>
                    </select>
                    <span>版本：</span>
                    <select name="" id="" :value="blocklyiVersion" @change="selectBlocklyVersion">
                        <option v-for="item in blocklyList" :value="item.name">{{ item.name }}</option>
                    </select>
                    <button @click="BlocklyDownload()">下载</button>
                </div>
            </div>
        </div>
        <div class="download-content content">
            <img src="../assets/img/blockly2.png" alt="">
            <div class="download-content-desc">
                <h3>AIoT图形化编程平台上传插件</h3>
                <p>为了能够让AIoT图形化编程平台能够从浏览器和我们的 AI 和 IoT 模块进行通信，进行上传和运行的操作，我们推出一款跨平台的上传插件，用户下载该插件并安装，随后便可以对我们的电子模块进行上传编程。
                </p>
                <h5>支持的操作系统：</h5>
                <span>Windows / macOS</span>
            </div>
            <div class="download-content-download">
                <div>
                    <span>系统：</span>
                    <select name="" id="" :value="System2" @change="selectSystem2">
                        <option value="Windows">Windows</option>
                        <option value="Mac">Mac</option>
                    </select>
                    <span>版本：</span>
                    <select name="" id="" :value="AIoTVersion" @change="selectAIoTVersion">
                        <option v-for="item in AIoTVersionList" :value="item.name">{{ item.name }}</option>
                    </select>
                    <button @click="AIoTDownload()">下载</button>
                </div>
            </div>
        </div>
        <h1>推荐浏览器</h1>
        <div class="download-content content">
            <img src="../assets/img/google.png" alt="">
            <div class="download-content-desc">
                <h3>下载谷歌浏览器</h3>
                <p>使用谷歌浏览器，在线编程体验更流畅</p>
            </div>
            <div class="download-content-download">
                <a href="https://cocorobo.cn/downloads/Chrome.apk">下载Android版本</a>
                <a href="https://www.google.cn/chrome/index.html" target="_blank">前往下载</a>
            </div>
        </div>
        <div class="download-content content">
            <img src="../assets/img/360.png" alt="">
            <div class="download-content-desc">
                <h3>360安全浏览器</h3>
                <p>CocoBlockly 编程工具在 360 极速浏览器中运行，让你在线编程体验进行流畅</p>
            </div>
            <div class="download-content-download">
                <a href="https://browser.360.cn" target="_blank">前往下载</a>
            </div>
        </div>
        <h1>辅助工具及软件</h1>
        <div class="download-content content">
            <img src="../assets/img/TeamViewer.png" alt="">
            <div class="download-content-desc">
                <h3>TeamViewer 远程协助软件</h3>
                <p>随时随地连接到远程桌面电脑，让远程连接过程更加的快速和安全，轻松访问文件、网络及程序</p>
            </div>
            <div class="download-content-download">
                <a href="https://www.teamviewer.cn/cn/download/" target="_blank">前往下载</a>
            </div>
        </div>
        <div class="download-content content">
            <img src="../assets/img/zoom.png" alt="">
            <div class="download-content-desc">
                <h3>ZOOM 远程会议软件</h3>
                <p>多人手机云视频会议软件，提供兼备高清视频与移动网络会议功能的免费云视频通话</p>
            </div>
            <div class="download-content-download">
                <a href="https://zoom.com.cn/download" target="_blank">前往下载</a>
            </div>
        </div>
        <div class="download-content content">
            <img src="../assets/img/xiangrikui.jpg" alt="">
            <div class="download-content-desc">
                <h3>向日葵远程协助软件</h3>
                <p>免费的集远程控制电脑手机、远程桌面连接、远程开机、远程管理、支持内网穿透的一体化远程控制管理工具软件</p>
            </div>
            <div class="download-content-download">
                <a href="https://sunlogin.oray.com/download/" target="_blank">前往下载</a>
            </div>
        </div>
        <div class="download-content content">
            <img src="../assets/img/todesk.jpg" alt="">
            <div class="download-content-desc">
                <h3>ToDesk 远程协助软件</h3>
                <p>稳定流畅的远程控制,远程办公,远程协助软件.采用端对端加密,让每一次远程访问都安全可靠</p>
            </div>
            <div class="download-content-download">
                <a href="https://www.todesk.com/download.html" target="_blank">前往下载</a>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.download {
    background-color: #f0f0f0;
    text-align: center;
    width: 100%;
    padding-bottom: 75px;

    h1 {
        padding: 75px 0 0;
    }

    .download-content {
        position: relative;
        display: flex;
        justify-content: start;
        background-color: #fff;
        padding: 40px;
        border-radius: 10px;
        box-shadow: 0 3px 1px 0px #f1f1f1;
        margin-top: 75px;

        img {
            border-radius: 15px;
            width: 190px;
        }

        .download-content-desc {
            width: calc(100% - 200px);
            padding-left: 50px;
            text-align: left;

            P {
                margin-top: 25px;
            }

            h5 {
                margin-top: 50px;
                margin-bottom: 10px;
            }

            span {
                color: #666;
            }
        }

        .download-content-download {
            position: absolute;
            right: 40px;
            bottom: 40px;

            a {
                color: #fff;
                background-color: #1eaaff;
                padding: 10px 20px;
                border-radius: 20px;
                text-decoration: none;
                margin-left: 15px;
            }

            p {
                margin-top: 15px;
            }
            select{
                margin: 0 10px;
            }
        }
    }

}
</style>