181 lines
7.4 KiB
Vue
181 lines
7.4 KiB
Vue
<template>
|
||
<!-- <Load></Load> -->
|
||
<!-- <ImgDetail ref='ImgDetailRef' :imgList="imgList" :imgIdx="imgIdx"></ImgDetail> -->
|
||
|
||
<Head>
|
||
<Title>{{ tdk.tdk_title }}</Title>
|
||
<Meta :content=tdk.tdk_keyword name="keywords" />
|
||
<Meta :content=tdk.tdk_description name="description" />
|
||
<Meta name="baidu-site-verification" content="" />
|
||
</Head>
|
||
<Header></Header>
|
||
<Carousel></Carousel>
|
||
|
||
|
||
<div class="Home-main">
|
||
|
||
|
||
<!-- 卡片展示 -->
|
||
<div class="card-pos-box">
|
||
<div class="content">
|
||
<div class="card1" v-for="(item, idx) in 3">
|
||
<div class="show-wrapper">
|
||
<div class="pic-wrapper">
|
||
<img src="http://tool.aerwen.net/prod-api/Uploads/uploads/20230816/47B42E97B65317FB.png"/>
|
||
</div>
|
||
<h2 class="title">Mario</h2>
|
||
<div class="show-info">
|
||
<div class="show-info-item">
|
||
<svg t="1690023375234" class="icon love-icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="1642" width="128" height="128">
|
||
<path
|
||
d="M895.36 243.904a251.52 251.52 0 0 0-355.776 0l-20.096 20.096-20.096-20.096A251.52 251.52 0 0 0 143.616 599.68S466.24 926.72 512 928c14.336 0.384 86.4-59.52 164.224-128.192l-0.512-0.64a22.016 22.016 0 0 0-11.968-40.896 21.76 21.76 0 0 0-14.784 5.888l-0.064-0.064 62.336-56.832a22.08 22.08 0 0 0-7.808 16.704 22.4 22.4 0 0 0 22.4 22.464c5.44 0 10.24-2.176 14.208-5.44l0.256 0.32 50.048-45.76-0.448-0.448a22.08 22.08 0 0 0-16.768-36.992 21.952 21.952 0 0 0-14.656 5.824l80.384-73.472 0.512 0.512a22.08 22.08 0 0 0-5.696 14.592 22.4 22.4 0 0 0 22.4 22.464 22.016 22.016 0 0 0 14.272-5.504l0.32 0.384 24.832-23.168a251.776 251.776 0 0 0-0.128-355.84z"
|
||
fill="" p-id="1643"></path>
|
||
<path
|
||
d="M510.976 878.656c-51.008-33.344-207.168-180.416-335.488-310.528a206.976 206.976 0 0 1-0.192-292.544c39.04-39.104 91.008-60.608 146.24-60.608s107.136 21.504 146.176 60.544l51.84 51.84 51.84-51.776c39.04-39.04 90.944-60.544 146.176-60.544s107.2 21.504 146.176 60.544c39.04 39.04 60.544 90.944 60.544 146.24s-21.504 107.136-60.544 146.176c-140.096 131.776-301.76 276.032-352.768 310.656z"
|
||
fill="#FF5F5F" p-id="1644"></path>
|
||
<path
|
||
d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z"
|
||
fill="#FFFFFF" p-id="1645"></path>
|
||
</svg>
|
||
132k
|
||
</div>
|
||
<div class="show-info-item">
|
||
<svg t="1690023393353" class="icon Watch-icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="1798" width="128" height="128">
|
||
<path
|
||
d="M512 853.333333c-263.9872 0-477.866667-284.672-477.866667-341.230933C34.133333 471.3472 248.0128 170.666667 512 170.666667c263.918933 0 477.866667 303.445333 477.866667 341.435733C989.7984 568.900267 775.850667 853.333333 512 853.333333z m-6.144-521.1136c-127.658667 0-276.5824 60.279467-276.5824 187.938134s148.8896 174.318933 276.548267 174.318933 279.005867-46.660267 279.005866-174.318933-151.3472-187.938133-279.005866-187.938134z m2.594133 93.7984a79.325867 79.325867 0 0 0 79.223467 79.291734c10.376533 0 19.968-2.1504 29.013333-5.563734 0.341333 3.6864 1.297067 7.202133 1.297067 11.0592a113.220267 113.220267 0 1 1-226.542933 0 113.322667 113.322667 0 0 1 113.220266-113.3568c3.1744 0 6.178133 0.7168 9.216 0.989867-3.345067 8.6016-5.4272 17.749333-5.4272 27.579733z"
|
||
fill="#85C2FF" p-id="1799"></path>
|
||
</svg>
|
||
12k
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hover-wrapper">
|
||
<div class="hover-info">
|
||
<div class="info-item">
|
||
<span>13k</span>
|
||
<span class="info-item-title">Loveing</span>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="info-item">
|
||
<span>14k</span>
|
||
<span class="info-item-title">Watching</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn">查看更多</button>
|
||
</div>
|
||
<div class="background"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 米尔产品 -->
|
||
<div class="product-big-box">
|
||
<div class="product-pos-box">
|
||
<div class="product-title-box">
|
||
<h1 class="product-title">米尔产品 </h1>
|
||
</div>
|
||
<div class="product-type-box">
|
||
<div v-for="item in 4" class="product-typ-item">
|
||
ARM开发工具
|
||
</div>
|
||
</div>
|
||
<div class="product-content-box op0" data-animation="animate__animated animate__fadeInUp animate__animated_slow">
|
||
<div class="product-content-left-box"><img src="https://www.myir-tech.com/public/images/index/product_02.jpg?1">
|
||
</div>
|
||
<div class="product-content-right-box" style="">
|
||
<div class="product-content-right-intro">
|
||
米尔通过与ST，TI，NXP，全志，Microchip等芯片原厂保持深度密切合作，自主研发了系列应用于工业控制及物联网等相关领域的核心板和开发板等产品，帮助客户实现产品及方案的快速开发。
|
||
</div>
|
||
<div class="product-advantage-pos-box">
|
||
<div class="product-advantage-box" v-for="(item, idx) in 3">
|
||
<div class="product-advantage-img-box">
|
||
<img src="https://www.myir-tech.com/public/images/index/my_product_icon_04.png">
|
||
</div>
|
||
<div class="product-advantage-text">品质优良 性能卓越</div>
|
||
</div>
|
||
</div>
|
||
<div class="product-content-btn-box">
|
||
<el-button type="warning">查看产品</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<!-- 图片预览示例 -->
|
||
<!-- <div class="top-show-box">
|
||
<img @click="handleImg(0)" :src=openImg1 alt="">
|
||
</div> -->
|
||
|
||
<Final></Final>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
|
||
/** 基础变量 **/
|
||
let imgList = ref([])
|
||
let imgIdx = ref(0)
|
||
let ImgDetailRef = ref(null)
|
||
|
||
|
||
/**预对接的数据**/
|
||
let openImg1 = ref("/img/home/open/open1.png")
|
||
|
||
|
||
/**js常量的定义**/
|
||
|
||
|
||
|
||
|
||
/**js操控的逻辑变量**/
|
||
|
||
|
||
|
||
|
||
/**方法函数**/
|
||
|
||
// 预览图片
|
||
function handleImg(v) {
|
||
ImgDetailRef.value.showImgDetail()
|
||
imgIdx.value = v
|
||
}
|
||
|
||
|
||
/**
|
||
* 接口对接
|
||
*/
|
||
|
||
// 获取Tdk
|
||
let tdk = ref({})
|
||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1 } }).then(res => {
|
||
tdk.value = JSON.parse(res.data.value).data
|
||
})
|
||
|
||
|
||
|
||
/**onMounted**/
|
||
onMounted(() => {
|
||
// imgList.value.push(openImg1.value)
|
||
|
||
htmlAddAnimations({ tagDom: 'Home-main', preload: 1.3 })
|
||
})
|
||
/**export**/
|
||
defineExpose({
|
||
middleware: 'auth'
|
||
})
|
||
|
||
</script>
|
||
|
||
<style scoped src="~/assets/css/index/index.scss"></style>
|
||
<style scoped src="~/assets/css/index/card.css"></style>
|
||
<style scoped src="~/assets/css/index/media.scss"></style> |