/弄懂跨域读：前端开发者必看：彻底搞懂CORS跨域问题与实战解决方案-CSDN博客/
01、uniapp项目axios前端请求不同域名服务器出现： Cors Erro；前端直接请求其他电脑IP端口的接口，出现了跨域不通的情况
（1）场景：
网页尝试向不同域名的服务器发送请求时，浏览器会根据CORS策略来决定是否允许该请求。如果服务器没有正确配置CORS策略，浏览器就会阻止该请求，从而导致CORS错误。
（2）做法：
前端请求跨域："CORS Error"
vue基础路径直接加url："http://ip:port/..."
请求带token，方式是json，带查询参数param
1、加请求头
（3）效果：
跨域解决、代理地址路径正确、请求正常。
1、paiding和margin对盒子间的细微位置调整：
（1）场景：当要调整的元素模块已经使用了统一的设计模板，但又想做特殊处理，应该对当前模块做对应的微调。主要使用paiding和margin对盒子间的细微位置调整，达到想要的效果。
（2）做法：
<view class="page-container">
<!-- 顶部查询区域 -->
<view class="search-container">
<view class="search-box">
<image class="search-icon" src="/static/images/search.svg"></image>
<input
class="search-input"
placeholder="请输入查询产品关键字"
v-model="searchKeyword"
@confirm="handleSearch"
/>
</view>
</view>
</view>
.page-container {
min-height: 100vh;
background-color: #f5f5f9;
}
.search-container {
padding: 24rpx 20rpx 24rpx 20rpx; //外边距：上、右、下、左
margin: -20rpx -20rpx 0rpx -20rpx; //内边距：上、右、下、左
background-color: #fff;
}
.search-box {
display: flex;
align-items: center;
background-color: #f2f2f2;
border-radius: 10rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);//设计阴影
padding: 20rpx 20rpx;
height: 20rpx;
}
（3）效果：
2、背景样式：
（1）场景：在指定元素的当前位置设计特殊的背景色调
<view class="container">
<!-- 顶部 Banner 图片 -->
<view class="banner-background">
<view class="banner-section">
<image
class="banner-image"
src="/static/images/index/banner.png"
mode="aspectFill"
@error="handleBannerError"
@load="handleBannerLoad"
/>
</view>
</view>
</view>
/* Banner 区域 */
.banner-background {
background: linear-gradient(165deg, #facf8f 0%, #f5f5f9 70%);
padding: 25rpx 28rpx;
margin: 0 0 18rpx 0;
}
.banner-section {
width: 100%;
height: 360rpx;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
box-sizing: border-box;
overflow: hidden;
}
（2）做法：background: linear-gradient(165deg, #facf8f 0%, #f5f5f9 70%); /渐变色： 渐变角度方向线，起始颜色，开始变色相对圆心位置，结束颜色，结束变色相对圆心位置，/
（3）效果：
2、相对位置设计图片：
（1）场景：父级元素未卡片，子级元素图片要放在特殊位置
<view
class="drug-card"
v-for="(item, index) in drugList"
:key="index"
@click="goToDetail(item)"
>
<image
:src="item.signingStatus === '已签订' ? '/static/images/sanfang/order.png' : '/static/images/sanfang/unorder.png'"
class="status-image"
></image>
<view class="drug-title">{{ item.contractNumber }}</view>
<view class="drug-field"><text class="label">产品名称：</text><text class="value">{{ item.name || '-' }}</text></view>
<view class="drug-field"><text class="label">产品代码：</text><text class="value">{{ item.productCode || '-' }}</text></view>
<view class="drug-field"><text class="label">医疗机构：</text><text class="value">{{ item.medicalInstitution || '-' }}</text></view>
<view class="drug-field"><text class="label">生产企业：</text><text class="value">{{ item.manufacturer || '-' }}</text></view>
<view class="drug-field"><text class="label">配送企业：</text><text class="value">{{ item.distributionCompany || '-' }}</text></view>
</view>
.status-image {
position: absolute; /* 使用绝对定位，相对于最近的具有定位属性的父元素进行定位 */
right: 20rpx; /* 元素右侧距离其包含块右侧的距离为20rpx */
top: 20rpx; /* 元素顶部距离其包含块顶部的距离为20rpx */
width: 40rpx; /* 设置元素宽度为40rpx */
height: 40rpx; /* 设置元素高度为40rpx */
z-index: 1; /* 设置元素的堆叠层级，数值越大越靠前显示 */
}
.drug-card {
position: relative; /* 此盒子下启用相对位置布局position */
background-color: #fff;
border-radius: 0rpx;
padding: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
（2）做法：
父级元素设置：position: relative;（此盒子下启用相对位置布局position）
子元素模块设置：position: absolute; （使用绝对定位，相对于最近的具有定位属性的父元素进行定位） right: 20rpx;top: 20rpx; （元素右侧、顶部距离其包含块右侧、顶部的距离）z-index: 1; （ 设置元素的堆叠层级，数值越大越靠前显示 ，多个子元素会有堆叠嵌套情况）
（3）效果：
