Merge branch 'master' of https://git.citupro.com/zhengnaiwen_citu/menduner-uniapp

api/common.js

@@ -307,4 +307,16 @@ export const getInterviewInviteListByInviteUserId = async (inviteUserId) => {
       auth: true
     }
   })
+}
+
+// 内容管理-广告
+export const getWebContent = async () => {
+  return request({
+    url: `/app-api/menduner/system/web-content/get?id=1`,
+    method: 'GET',
+    custom: {
+      showLoading: false,
+      auth: false
+    }
+  })
 }

api/position.js

@@ -13,6 +13,19 @@ export const getJobAdvertisedSearch = (params) => {
   })
 }
 
+// 推荐职位列表
+export const getPromotedPosition = (params) => {
+  return request({
+    url: '/app-api/menduner/system/job/advertised/get/recommended',
+    method: 'GET',
+    params,
+    custom: {
+      showLoading: false,
+      auth: false
+    }
+  })
+}
+
 // 职位详情
 export const getPositionDetails = (params) => {
   return request({

api/sign.js

@@ -160,6 +160,19 @@ export const getUserWalletRechargePage = async (params) => {
   })
 }
 
+// 获得钱包流水分页
+export const getUserWalletTransactionPage = async (params) => {
+  return request({
+    url: '/app-api/pay/wallet-transaction/page',
+    method: 'GET',
+    params,
+    custom: {
+      showLoading: false,
+      auth: true
+    }
+  })
+}
+
 // 账户变动记录
 export const getEnterpriseAccountRecordPage = async (params) => {
   return request({

components/Advertisement/index.vue

@@ -4,7 +4,7 @@
 			<view class="popup-content" >
 					<swiper class="swiper-box" @change="swiperChange">
 						<swiper-item v-for="(item ,index) in swiperList" :key="index" class="f-straight">
-							<image class="img-item" :src="item.url" @click="skipLink(item)" mode="widthFix"></image>
+							<image class="img-item" :src="item.img" @click="skipLink(item)" mode="widthFix"></image>
 							<view @click="closeAdd" class="f-horizon-center">
 								<uni-icons style="display: flex;justify-content: flex-end;" type="closeempty"	size="40"	color="#fff"/>
 							</view>
@@ -17,20 +17,28 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { getWebContent } from '@/api/common'
 
 const current = ref(0)
 const inputDialog = ref()
-const swiperList = [
+const swiperList = ref([
 	// {
 	// 	url: 'https://minio.menduner.com/dev/260c94447f93c5258e6b5c0db453f9da92ce59bebd1eef6bff3a8063d91d07f1.jpg',
 	// 	path: 'https://mp.weixin.qq.com/s/lI7_iHY1yaEqrb_kG1MusA'
 	// }
-	{
-		url: 'https://minio.menduner.com/dev/menduner/advertisement.jpg' // 注册广告
-	}
-]
+	// {
+	// 	url: 'https://minio.menduner.com/dev/menduner/advertisement.jpg' // 注册广告
+	// }
+])
 const currentPage = getCurrentPages()[0].route
 
+// 获取广告图
+const getSystemWebContent = async () => {
+  const { data } = await getWebContent()
+  swiperList.value = data.appAdvertisement || []
+}
+getSystemWebContent()
+
 const closeAdd = () => {
   inputDialog.value.close()
 	uni.removeStorageSync('firstOpen')
@@ -40,15 +48,15 @@ const openDialog = () => {
   inputDialog.value.open()
 }
 
-const skipLink = ({path}) => {
+const skipLink = ({ link, title }) => {
 	closeAdd()
 	// if (!uni.getStorageSync('token') && currentPage !== 'pages/login/index') {
 	// 	uni.switchTab({
   //     url: '/pages/index/my'
   //   })
 	// }
-	if (path) {
-		uni.navigateTo({ url: `/pages/addWebView/index?url=${path}` })
+	if (link) {
+		uni.navigateTo({ url: `/pages/addWebView/index?url=${link}&title=${title}` })
 	}
 }
 

components/PositionList/index.vue

@@ -107,7 +107,7 @@ const toDetail = (item) =>{
 .enterAvatar{
 	width: 40px;
 	height: 40px;
-	border-radius: 50%;
+	// border-radius: 50%;
 	margin: auto;
 }
 

pages/index/crowdsourcing.vue

@@ -13,7 +13,7 @@
 				<view class="content-top">
 					<view class="content-top-carousel">
 						<view class="content-top-carousel-box">
-							<SwiperAd :list="swiperAdList" :strType="false" @click="handleToDetails"></SwiperAd>
+							<SwiperAd :list="swiperAdList" imgUrlKey="img" :strType="false" @click="handleToDetails"></SwiperAd>
 						</view>
 					</view>
 					<view class="content-top-recommend">
@@ -47,6 +47,7 @@ import ResumeStatus from '@/components/ResumeStatus'
 import { getJobAdvertisedHire } from '@/api/position.js'
 import { dealDictArrayData } from '@/utils/position.js'
 import PositionList from '@/components/PositionList'
+import { getWebContent } from '@/api/common'
 import { onShow, onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 // 设置自定义tabbar选中值
 onShow(() => {
@@ -56,17 +57,15 @@ onShow(() => {
     // 设置当前tab页的下标index
     currentTabBar?.setData({ selected: 3 });
 })
-const swiperAdList = [
-  { src: 'https://minio.menduner.com/dev/menduner/banner/IHG.gif', id: '577540545828753408' },
-  { src: 'https://minio.citupro.com/dev/menduner/preferredGroup/SWISS-HOTEL-MANAGEMENT-SCHOOL-MBA.jpg' },
-  { src: 'https://minio.menduner.com/dev/menduner/banner/Marriott.jpg', id: '734173233779183616' },
-  { src: 'https://minio.menduner.com/dev/menduner/banner/UrCove.jpg', id: '277182701256183808' },
-  { src: 'https://minio.menduner.com/dev/menduner/miniProgram/Grand-Mercure.jpg', id: '120281807903133696' },
-  // { src: 'https://minio.menduner.com/dev/5eb89c28816dbc7613986ac994d2d760cc9fada84e17a78970c424904c26667c.jpg', id: '735167920258289664' },
-  { src: 'https://minio.menduner.com/dev/c2fc649b5aec3811c7a171b199bc2e67bb1649e63b471e48a59c8a6ead6aa047.jpg', weiXinPublicUrl: 'https://mp.weixin.qq.com/s/lI7_iHY1yaEqrb_kG1MusA' },
-  { src: 'https://minio.menduner.com/dev/fbff08c5608d746380f859a97241109fe4726f776a25301d7d0fb43d9ba7df67.png', weiXinPublicUrl: 'https://mp.weixin.qq.com/s/NrxuXTi7kB9AngNBYJ3v4A' },
-	{ src: 'https://minio.menduner.com/dev/4aeb9acb92512d899596d692db935429b339fca189129c0d78ce966f81ba2d38.jpg' }
-]
+
+// 获取轮播图
+const swiperAdList = ref([])
+const getSystemWebContent = async () => {
+  const { data } = await getWebContent()
+  swiperAdList.value = data.appHomeCarousel || []
+}
+getSystemWebContent()
+
 const items = reactive([])
 const pageInfo = ref({
 	pageNo: 1,
@@ -79,12 +78,12 @@ const total = ref(0)
 const more = ref('more')
 
 // 跳转企业详情
-const handleToDetails = ({ id, weiXinPublicUrl }) => {
-	if (id) {
-		uni.navigateTo({ url: `/pagesB/companyDetail/index?id=${id}` })
-	}
-	if (weiXinPublicUrl) {
-		uni.navigateTo({ url: `/pages/addWebView/index?url=${weiXinPublicUrl}&title=风尚榜奖投票` })
+const handleToDetails = ({ link, title }) => {
+	// if (id) {
+	// 	uni.navigateTo({ url: `/pagesB/companyDetail/index?id=${id}` })
+	// }
+	if (link) {
+		uni.navigateTo({ url: `/pages/addWebView/index?url=${link}&title=${title || '风尚榜奖投票'}` })
 	}
 }
 

pages/index/my.vue

@@ -107,8 +107,8 @@ const list = ref([
 	{	title: '附件简历',	path: '/pagesA/resume/index'	},					
 	{ title: '面试管理', path: '/pagesA/interview/index' },
 	{	title: '会员套餐', path: '/pagesA/vipPackage/index'	},		
-	{	title: '我的分享码',	path: 'shareQrCode'	},					
-	// {	title: '我的分享码',	path: '/pagesB/sharePoster/index'	},					
+	// {	title: '我的分享码',	path: 'shareQrCode'	},					
+	{	title: '我的分享码',	path: '/pagesB/sharePoster/index'	},					
 	{	title: '新用户邀请记录',	path: '/pagesB/inviteRecord/index'	},
 	{ title: '门墩儿商城', appId: 'wx6decdf12f9e7a061' },
 	{ title: '我要招聘', key: 'recruit' },

pages/index/position.vue

@@ -2,9 +2,9 @@
   <view>
     <Navbar></Navbar>
     <view class="box defaultBgc">
-      <scroll-view class="scrollBox" scroll-y="true" @scrolltolower="loadingMore" style="position:relative;">
+      <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
         <view>
-          <SwiperAd :list="swiperAdList" :strType="false" @click="handleToDetails"></SwiperAd>
+          <SwiperAd :list="swiperAdList" imgUrlKey="img" :strType="false" @click="handleToDetails"></SwiperAd>
           <!-- 五宫格菜单 -->
           <view class="white-bgc ss-p-t-10">
             <uni-grid :column="5" @change="handleGrid" :showBorder="false">
@@ -21,7 +21,7 @@
               <view style="position: relative;">
                 <uni-search-bar
                   v-model="query.content"
-                  placeholder="请输入职位/公司关键字"
+                  placeholder="输入职位/公司关键字"
                   cancelButton="none"
                   :focus="false"
                   bgColor="#fff"
@@ -51,17 +51,18 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, nextTick } from 'vue'
 import SwiperAd from '@/components/SwiperAd'
 import FilterList from '@/components/FilterList'
 import PositionList from '@/components/PositionList'
 import AdvertisePop from '@/components/Advertisement'
 import { dealDictObjData } from '@/utils/position'
-import { getJobAdvertisedSearch } from '@/api/position'
+import { getJobAdvertisedSearch, getPromotedPosition } from '@/api/position'
 import { onShow, onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 import Navbar from '@/components/Navbar'
 import { getRewardEventList } from '@/utils/eventList'
 import { getMorningNewsArticle } from '@/api/content'
+import { getWebContent } from '@/api/common'
 
 // 设置自定义tabbar选中值
 onShow(() => {
@@ -94,17 +95,16 @@ onLoad(() => {
 
 const inputDialog = ref()
 const more = ref('more')
-const swiperAdList = [
-  { src: 'https://minio.menduner.com/dev/menduner/banner/IHG.gif', id: '577540545828753408' },
-  { src: 'https://minio.citupro.com/dev/menduner/preferredGroup/SWISS-HOTEL-MANAGEMENT-SCHOOL-MBA.jpg' },
-  { src: 'https://minio.menduner.com/dev/menduner/banner/Marriott.jpg', id: '734173233779183616' },
-  { src: 'https://minio.menduner.com/dev/menduner/banner/UrCove.jpg', id: '277182701256183808' },
-  { src: 'https://minio.menduner.com/dev/menduner/miniProgram/Grand-Mercure.jpg', id: '120281807903133696' },
-  // { src: 'https://minio.menduner.com/dev/5eb89c28816dbc7613986ac994d2d760cc9fada84e17a78970c424904c26667c.jpg', id: '735167920258289664' },
-  { src: 'https://minio.menduner.com/dev/c2fc649b5aec3811c7a171b199bc2e67bb1649e63b471e48a59c8a6ead6aa047.jpg', weiXinPublicUrl: 'https://mp.weixin.qq.com/s/lI7_iHY1yaEqrb_kG1MusA' },
-  { src: 'https://minio.menduner.com/dev/fbff08c5608d746380f859a97241109fe4726f776a25301d7d0fb43d9ba7df67.png', weiXinPublicUrl: 'https://mp.weixin.qq.com/s/NrxuXTi7kB9AngNBYJ3v4A' },
-  { src: 'https://minio.menduner.com/dev/4aeb9acb92512d899596d692db935429b339fca189129c0d78ce966f81ba2d38.jpg' }
-]
+
+// 获取轮播图
+const swiperAdList = ref([])
+const getSystemWebContent = async () => {
+  const { data } = await getWebContent()
+  swiperAdList.value = data.appHomeCarousel || []
+}
+getSystemWebContent()
+
+
 const filterList = ref([
   { label: '城市', dictType: 'areaTreeDataExtend', key: 'areaIds', map: { text: 'name', value: 'id' } },
   // { label: '行业', dictType: 'industryTreeData',key: 'industryIds', map: { text: 'nameCn', value: 'id' } },
@@ -123,12 +123,12 @@ const gridList = [
 ]
 
 // 跳转企业详情
-const handleToDetails = ({ id, weiXinPublicUrl, title }) => {
-	if (id) {
-		uni.navigateTo({ url: `/pagesB/companyDetail/index?id=${id}` })
-	}
-	if (weiXinPublicUrl) {
-		uni.navigateTo({ url: `/pages/addWebView/index?url=${weiXinPublicUrl}&title=${title || '风尚榜奖投票'}` })
+const handleToDetails = ({ link, title }) => {
+	// if (id) {
+	// 	uni.navigateTo({ url: `/pagesB/companyDetail/index?id=${id}` })
+	// }
+	if (link) {
+		uni.navigateTo({ url: `/pages/addWebView/index?url=${link}&title=${title || '风尚榜奖投票'}` })
 	}
 }
 
@@ -164,22 +164,48 @@ const handleGrid = async (e) => {
 	}
 }
 
+const checkValue = (obj) => {
+  return Object.values(obj).some(value => {  
+    return value !== null && value !== undefined && value !== '' && (Array.isArray(value) ? value.length > 0 : true)
+  })
+}
+
 const positionListData = ref([])
 const query = reactive({ 
   pageSize: 20, 
   pageNo: 1,
   hire: false,
   content: '',
+  positionId: '',
   areaIds: [],
   industryIds: [],
   jobType: [],
-  payScope: [],
-  expType: []
+  payScope: ''
 })
 const getData = async () => {
+  // 效验是否有带搜索条件
+  const { content, areaIds, industryIds, jobType, payScope, positionId } = query
+  const hasValue = checkValue({ content, areaIds, industryIds, jobType, payScope, positionId })
+
+  // 带查询条件时返回到顶部
+  if (hasValue) {
+    scrollTop.value = old.value.scrollTop
+    nextTick(() => {
+      scrollTop.value = 0
+    })
+  }
+
+  // 带搜索条件（除分页外）用职位搜索接口，无条件则用推荐接口
+  const api = hasValue ? getJobAdvertisedSearch : getPromotedPosition
+  const params = hasValue ? query : { pageSize: query.pageSize, pageNo: query.pageNo, hire: 0 }
   try {
-    const res = await getJobAdvertisedSearch(query)
-    const list = res?.data?.list || []
+    const res = await api(params)
+    const arr = res?.data?.list || []
+    // 推荐接口返回数据需要拼接
+    const list = !hasValue ? arr.map(e => {
+      const { anotherName, logoUrl, scale, industryId, enterpriseId, enterpriseName, ...job } = e
+      return { job, enterprise: { anotherName, logoUrl, scale, industryId, enterpriseId, name: enterpriseName } }
+    }) : arr
     positionListData.value.push(...list.map(e => {
       if (!e) {
         return e
@@ -196,11 +222,17 @@ const getData = async () => {
     query.pageNo--
     more.value = 'more'
   }
-  
-  
 }
 getData()
 
+const scrollTop = ref(0)
+const old = ref({
+  scrollTop: 0
+})
+const onScroll = (e) =>{
+  old.value.scrollTop = e.detail.scrollTop
+}
+
 const handleSearch = (key, value) => {
   if (key === 'positionId' || key === 'payScope') {
     query[key] = value || null

pagesA/balance/index.vue

@@ -15,11 +15,11 @@
           <view class="list">
             <uni-list border-full>
               <uni-list-item
-                v-for="item in items"
-                :key="item.id"
-                :title="item._payPrice"
-                :note="item._payTime"
-                :rightText="item.payChannelName"
+                v-for="(item, index) in items"
+                :key="index"
+                :title="item.title"
+                :note="item.price"
+                :rightText="item.createTime"
               />
             </uni-list>
             <uni-load-more :status="more" />
@@ -34,7 +34,7 @@
 import { ref } from 'vue'
 import {
   getAccountBalance,
-  getUserWalletRechargePage
+  getUserWalletTransactionPage
 } from '@/api/sign'
 import { timesTampChange } from '@/utils/date'
 
@@ -61,7 +61,7 @@ async function getBalance() {
 
 async function getList () {
   try {
-    const { data } = await getUserWalletRechargePage(pageInfo.value)
+    const { data } = await getUserWalletTransactionPage(pageInfo.value)
     if (!data || !data.list || !data.list.length) {
       if (pageInfo.value.pageNo === 1) {
         return
@@ -72,9 +72,13 @@ async function getList () {
     }
     const _data = data.list.map(e => {
       return {
-        ...e,
-        _payPrice: (e.payPrice / 100.0).toFixed(2),
-        _payTime: timesTampChange(e.payTime)
+        // ...e,
+        // _payPrice: (e.payPrice / 100.0).toFixed(2),
+        // _payTime: timesTampChange(e.payTime)
+        // ...e,
+        title: e.title,
+        createTime: timesTampChange(e.createTime),
+        price: (e.price / 100.0).toFixed(2)
       }
     })
     items.value.push(..._data)

pagesA/collect/company.vue

@@ -5,7 +5,7 @@
         <view v-for="(item, index) in items" :key="index" class="ss-m-t-20" @click="toDetail(item)">
           <view style="background-color: #fff; border-radius: 12px;" class="ss-p-30">
             <view class="d-flex align-center">
-              <image :src="item.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" class="avatar" style="width: 50px; height: 50px; object-fit: contain"></image>
+              <image :src="item.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" style="width: 50px; height: 50px; object-fit: contain"></image>
               <view style="flex: 1;" class="ss-m-l-30">
                 <view class="enterprise-name ellipsis">{{ item.name }}</view>
                 <view class="ss-m-y-15 font-size-12">

pagesA/seenMe/index.vue

@@ -15,7 +15,7 @@
           </view>
           <view style="background-color: #fff; border-radius: 0 0 12px 12px;" class="ss-p-30">
             <view class="d-flex align-center">
-              <image :src="item.enterprise.logoUrl" class="avatar" style="width: 50px; height: 50px;"></image>
+              <image :src="item.enterprise.logoUrl" style="width: 50px; height: 50px;"></image>
               <view style="flex: 1;" class="ss-m-l-30">
                 <view class="enterprise-name ellipsis">{{ item.enterprise.anotherName || item.enterprise.name }}</view>
                 <!-- 行业规模 -->

pagesB/companyDetail/index.vue

@@ -2,7 +2,7 @@
   <view class="ss-p-b-30">
     <view class="mar p-tb ss-m-x-30">
       <view class="f-horizon">
-        <image class="r-avatar" style="width: 80px; height: 80px;" :src="info.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
+        <image style="width: 80px; height: 80px;" :src="info.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
         <view class="f-straight ss-m-l-10" style="flex: 1;position: relative;">
           <view class="title-des font-weight-bold" style="max-width: 45vw;">{{ info.anotherName }}</view>
           <view class="color-999 ellipsis font-size-14" style="max-width: 60vw;">

pagesB/positionDetail/index.vue

@@ -46,7 +46,7 @@
           <!-- 企业信息 -->
           <view class="topLine mt-5 d-flex" @click="handleToEnterprise">
             <view class="avatarBox">
-              <image class="avatar" :src="info.enterprise?.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
+              <image style="width: 40px; height: 40px;" :src="info.enterprise?.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
             </view>
             <view >
               <view class="contact-name">{{ info.contact?.name }}</view>

pagesB/recommendEnterprise/index.vue

@@ -115,7 +115,7 @@ const handleToPosition = (k) => {
 .enterAvatar {
   width: 60px;
   height: 60px;
-  border-radius: 50%;
+  // border-radius: 50%;
   margin: auto;
 }
 .line {

pagesB/sharePoster/index.vue

@@ -1,8 +1,8 @@
 <template>
   <view style="position: relative;">
-    <view v-if="shareUrl" class="d-flex align-center flex-column">
-      <image v-if="!!shareUrl" class="imgBox" @click="handlePreviewSharePoster" :src="shareUrl" :show-menu-by-longpress="true"></image>
-      <view class="color-999 ss-m-t-20 font-size-14">点击图片预览，长按图片保存</view>
+    <view v-if="shareUrl" class="d-flex align-center flex-column justify-center" style="height: 100vh;">
+      <image v-if="!!shareUrl" :style="imgStyle" @click="handlePreviewSharePoster" :src="shareUrl" :show-menu-by-longpress="true"></image>
+      <view class="color-999 ss-m-t-20 font-size-14 ss-m-b-50">点击图片预览，长按图片保存</view>
     </view>
 		<canvas canvas-id="posterCanvas" class="shareCanvas" style="width: 330px; height: 600px;"></canvas>
   </view>
@@ -11,10 +11,25 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { userStore } from '@/store/user'
+import { onLoad } from '@dcloudio/uni-app'
+import { getUserAvatar } from '@/utils/avatar'
 
 const useUserStore = userStore()
 const baseInfo = computed(() => useUserStore?.baseInfo)
 const shareUrl = ref('')
+const windowWidth = ref(0)
+
+onLoad(() => {
+  const windowInfo = wx.getWindowInfo()
+  windowWidth.value = windowInfo.windowWidth
+  console.log(windowWidth.value, '当前机型屏幕宽')
+})
+
+const imgStyle = computed(() => {
+  if (windowWidth.value <= 320) return `width: 259px; height: 460px;`
+  if (windowWidth.value > 320 && windowWidth.value <= 375) return `width: 313px; height: 560px;`
+  if (windowWidth.value > 375) return `width: 328px; height: 600px;`
+})
 
 // 图片预览
 const handlePreviewSharePoster = () => {
@@ -57,17 +72,18 @@ const createPoster = async () => {
   //清空画布
   context.clearRect(0, 0, 330, 600)
 
-  //背景图片
-  const { path: bgUrl } = await getImageTempRatio('https://minio.menduner.com/dev/a3cfa7975c5905441175abaa738cfca0bd794dbb6249318328c8cfff69ca91fe.jpg')
+  //背景图片 
+  const { path: bgUrl } = await getImageTempRatio('https://minio.menduner.com/dev/63a182780d26bd552819431b0ca94be8e3c90a90e2f933c61e4c83b4614f2fc6.jpg')
   context.drawImage(bgUrl, 0, 0, 330, 600) // 路径、x、y、宽、高
   
   // 头像
-  const { path } = await getImageTempRatio(baseInfo.value.avatar)
-  drawAvatar(context, path, 121.5, 74, 43.5) // canvas、图片路径、x、y、半径
+  const avatarUrl = getUserAvatar(baseInfo.value?.avatar, baseInfo.value?.sex)
+  const { path } = await getImageTempRatio(avatarUrl)
+  drawAvatar(context, path, 124, 22, 40.5) // canvas、图片路径、x、y、半径
 
   //分享二维码
   const { path: qrCode } = await getImageTempRatio('https://minio.citupro.com/dev/menduner/miniProgram.jpg')
-  context.drawImage(qrCode, 108, 310, 110, 110)
+  context.drawImage(qrCode, 105.5, 312.5, 120, 120)
 
   context.draw(false, () =>{
     wx.canvasToTempFilePath({ 
@@ -94,8 +110,4 @@ createPoster()
 	left: -99999upx;
 	z-index: -99999;
 }
-.imgBox {
-  width: 330px;
-  height: 600px;
-}
 </style>