|
|
@@ -1,30 +1,20 @@
|
|
|
<template>
|
|
|
-
|
|
|
-
|
|
|
- <headerBar
|
|
|
- title="首页"
|
|
|
- />
|
|
|
- <div class="mb-4">
|
|
|
-<!--
|
|
|
- <router-link
|
|
|
- class="mar-left-10"
|
|
|
- :to="{
|
|
|
- name:'PhotographyCheck'
|
|
|
- }"
|
|
|
- >
|
|
|
- <el-button type="warning">拍摄图像并处理</el-button>
|
|
|
- </router-link>-->
|
|
|
- <el-button type="warning" @click="goCheck">拍摄图像并处理</el-button>
|
|
|
-
|
|
|
- <el-button type="warning" @click="goShot">仅处理图像</el-button>
|
|
|
-<!-- <router-link
|
|
|
- class="mar-left-10"
|
|
|
- :to="{
|
|
|
- name:'PhotographyShot'
|
|
|
- }"
|
|
|
- >
|
|
|
- <el-button type="warning" @click="goShot">仅处理图像</el-button>
|
|
|
- </router-link>-->
|
|
|
+ <headerBar title="首页" />
|
|
|
+ <div class="home-container">
|
|
|
+ <!-- 背景图片 -->
|
|
|
+ <img src="@/assets/images/home/bg.png" alt="背景图片" class="background-image" />
|
|
|
+
|
|
|
+ <!-- 左侧图片区域 -->
|
|
|
+ <div class="image-container left-image" @click="goCheck">
|
|
|
+ <img src="@/assets/images/home/left.jpg" alt="拍摄产品并处理图像" class="zoom-on-hover" />
|
|
|
+ <div class="overlay-text">拍摄产品<br>并处理图像</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧图片区域 -->
|
|
|
+ <div class="image-container right-image" @click="goShot">
|
|
|
+ <img src="@/assets/images/home/right.jpg" alt="仅处理图像" class="zoom-on-hover" />
|
|
|
+ <div class="overlay-text" style="line-height: 80px;">仅处理图像</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -65,6 +55,73 @@ const goShot = ()=>{
|
|
|
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
+.home-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.background-image {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+
|
|
|
+.image-container {
|
|
|
+ position: absolute;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 400px; /* 设置宽度 */
|
|
|
+ height: 400px; /* 设置高度 */
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* 添加阴影效果 */
|
|
|
+
|
|
|
+ .zoom-on-hover {
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+ width: 100%; /* 确保图片充满容器 */
|
|
|
+ height: 100%; /* 确保图片充满容器 */
|
|
|
+ object-fit: cover; /* 裁剪图片以适应容器 */
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover .zoom-on-hover {
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.left-image {
|
|
|
+ top: 50%;
|
|
|
+ right: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ margin-right: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.right-image {
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ margin-left: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.overlay-text {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ color: white;
|
|
|
+ font-size: 24px;
|
|
|
+ text-align: center;
|
|
|
+ z-index: 1;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ padding: 10px 40px;
|
|
|
+ line-height: 50px;
|
|
|
+ min-height: 80px;
|
|
|
+ min-width: 250px;
|
|
|
+}
|
|
|
</style>
|
