常用的开发中，前端项目主要负责数据的表层处理。
更多主要数据业务逻辑实际操作是在后端，主要体现在数据的增删改查业务逻辑及其数据库的操作上。
今日简单罗列一下前端项目中数据表层的增删改查功能:
一，增，改
1.html中：
<ion-header>
<div class="bill-header">
<div class="bill-header-title">
<div class="bill-header-icon" (click)="goBack()">
<ion-icon name="chevron-back-outline" class="icon-left"></ion-icon>
</div>
</div>
<div class="bill-header-null">添加发票信息</div>
<div class="bill-header-detail"><span></span></div>
<div class="bill-header-icon" *ngIf="!showEdit" (click)="showEdit=!showEdit"><span>管理</span></div>
<div class="bill-header-icon" *ngIf="showEdit" (click)="onFinished();"><span>完成</span></div>
</div>
</ion-header>
<div class="bill-types">
<div class="btype-title">
发票类型
</div>
<div class="btype-check">
<div class="bt-citem" *ngFor="let item of Itypes" (click)="selectType(item)">
<ion-checkbox [(ngModel)]="item.isToggled"></ion-checkbox><span>{{item.title}}</span>
</div>
</div>
</div>
<div class="bill-bottom-bg"></div>
<ion-content class="bill-message">
<div class="bill-message-content">
<div class="bill-message-content-cell"><a>公司名称:</a><ion-input [(ngModel)]="companyName"></ion-input></div>
<div class="bill-message-content-cell"><a>纳税人识别号:</a>
<ion-input [(ngModel)]="taxpayerIdentif"></ion-input></div>
<div class="bill-message-content-bcell">
<ion-input placeholder=" 请输入详细地址信息" [(ngModel)]="registerAddress">
注册地址:
</ion-input>
</div>
<div class="bill-message-content-cell"><a>注册电话:</a> <ion-input [(ngModel)]="registerTelepho"></ion-input></div>
<div class="bill-message-content-cell"><a>开户银行:</a> <ion-input [(ngModel)]="depositBank"></ion-input></div>
<div class="bill-message-content-cell"><a>银行账号:</a> <ion-input [(ngModel)]="bankAccount"></ion-input></div>
<div class="bill-message-content-footer" (click)="saveBill()">
<span >保存</span>
</div>
</div>
</ion-content>
<ion-footer>
</ion-footer>
ts中调用接口，点击保存：
//新增发票信息
async getinsertInvoice() {
const goodsReq = {
'invoiceType' :this.invoiceType,
//'invoiceType' :1,
'companyName' :this.companyName,
'taxpayerIdentifyNumber':this.taxpayerIdentif,
'registerAddress':this.registerAddress,
'registerTelepho':this.registerTelepho,
'depositBank' :this.depositBank,
'bankAccount ' :this.bankAccount,
'businessLicense':'1',
}
this.showLoading(this.loadingCtrl, '加载中...').then((loading) => {
this.rest.apiPost(goodsReq, this.rest.getinsertInvoice).subscribe(res => {
const { status, msg, data } = res;
if (status == 200) {
this.toastWarning(this.toastCtrl, "添加成功！！");
this.navCtrl.back();
} else {
console.log("请求失败");
}
loading.dismiss();
}, (err) => {
this.toastError(this.toastCtrl, err.msg);
loading.dismiss();
});
})
}
//保存添加
saveBill(){
if(this.invoiceType!=null&&
this.companyName!=null&&
this.taxpayerIdentif!=null&&
this.registerAddress!=null&&
this.registerTelepho!=null&&
this.depositBank!=null&&
this.bankAccount!=null
){
this.getinsertInvoice();
}else{
this.toastWarning(this.toastCtrl, "请填写完整信息！！");
}
}
二，删
html
<div class="bill-operation" *ngIf="showEdit">
<div class="bill-null"></div>
<div class="bill-button">
<div class="bill-delete" (click)="deleteBill(item)">
删除
</div>
<div class="bill-edit" (click)="editBill(item)">
编辑
</div>
</div>
</div>
ts
//删除发票信息
async getdeleteInvoice() {
const goodsReq = {
'id':this.selectId
}
this.showLoading(this.loadingCtrl, '加载中...').then((loading) => {
this.rest.apiPost(goodsReq, this.rest.getdeleteInvoice).subscribe(res => {
const { status, msg, data } = res;
if (status == 200) {
this.toastWarning(this.toastCtrl, "删除成功！");
this.getlistInvoice();
} else {
console.log("请求失败");
}
loading.dismiss();
}, (err) => {
this.toastError(this.toastCtrl, err.msg);
loading.dismiss();
});
})
}
//删除发票
deleteBill(item){
console.log("删除",item,item.id)
if(item!=null){
this.selectId=item.id
this.getdeleteInvoice();
}
}
三，查,根据分类条件查，筛选条件查。
1.html获取搜索框输入内容
<div class="shop-item-search">
<img class="shop-search-find" src="../../../assets/icon/search-icon/search.png">
<div class="selected-tag" *ngIf="selectTag" (click)="touchTag(inputContent)">
{{this.tagName}}
<div class="sure-tag" *ngIf="selectTag">
<ion-icon name="close-outline" class="sure-outline"></ion-icon>
</div>
</div>
<div *ngIf="!selectTag"></div>
<ion-input class="shop-search" type="text" [(ngModel)]="inputContent"
(keyup)='getVal($event)'
(click)="clearInput()">
</ion-input>
<div class="cancel-tag" *ngIf="selectNoTag">
<ion-icon name="close-outline" class="close-outline"></ion-icon>
</div>
</div>
2，ts
1》获取取搜索框输入内容
getVal(e) {
//实现防抖,设置定时器
let timer = null;
timer && clearInterval(timer)
timer = setTimeout(() => {
console.log(this.inputContent);
}, 500);
if (this.inputContent.length > 0) {
this.inputContent = this.inputContent.slice(0, 30)
}
let keycode = window.event ? e.keyCode : e.which;
if (keycode == 13) {
this.selectNoTag = true;
//获取到搜索内容
this.getProductSearch();
}
if (keycode == 27 || this.inputContent == "") {//esc键
this.selectNoTag = false;
this.getProductSearch();
}
}
2》接口传入：this.inputContent
//产品搜索
async getProductSearch() {
const userInfo = {
'q': this.inputContent,
'pageNo': 1,
'pageSize': 16,
'order': this.sequenceList,
'specOptionName': this.sizeItems,
'brand': this.checkedBrands,
'price': this.inputPrice,
'categoryId': this.tagId,
}
this.rest.apiPost(userInfo, this.rest.getProductSearch).subscribe(res => {
const { status, msg, data } = res;
if (status == 200) {
console.log("------产品分类搜索-----");
this.tagSearchList = res.data.result;
console.log(this.tagSearchList);
} else {
console.log("请求失败");
}
});
}
3》完整代码
a.html
<ion-content fullscreen (ionScroll)="resizeHeader($event)" scrollEvents="true" class="product-reclassify">
<section class="shop-item-header">
<div id="detailNavBar" [ngClass]="isZindex ? 'onIndex': 'upIndex'">
<div class="shop-content-left" (click)="goBack()">
<img class="shop-cleft-img" src="../../../assets/icon/search-icon/left.png">
</div>
<div class="shop-item-search">
<img class="shop-search-find" src="../../../assets/icon/search-icon/search.png">
<div class="selected-tag" *ngIf="selectTag" (click)="touchTag(inputContent)">
{{this.tagName}}
<div class="sure-tag" *ngIf="selectTag">
<ion-icon name="close-outline" class="sure-outline"></ion-icon>
</div>
</div>
<div *ngIf="!selectTag"></div>
<ion-input class="shop-search" type="text" [(ngModel)]="inputContent"
(keyup)='getVal($event)'
(click)="clearInput()">
</ion-input>
<div class="cancel-tag" *ngIf="selectNoTag">
<ion-icon name="close-outline" class="close-outline"></ion-icon>
</div>
</div>
<div class="shop-content-right">
<img class="shop-cright-img" src="../../../assets/icon/search-icon/message.png">
</div>
</div>
</section>
<section class="shop-in-tabs" >
<div class="header-tabs" [ngClass]="isZindex ? 'onIndex':'upIndex' ">
<div class="tab-cell" (click)="changeBymultiple()">
<span>综合排序</span>
</div>
<div class="tab-cell" (click)="changeBySales()">
<span>销量优先</span>
</div>
<div class="tab-cell" (click)="changeSequence()">
<div class="menu-text">
<span>价格排序</span>
</div>
<div class="to-select">
<div class="to-up" [ngClass]="checkedBydesc ? 'downcolor': 'upcolor'"></div>
<div class="to-down" [ngClass]="!checkedBydesc ? 'downcolor' : 'upcolor'"></div>
</div>
</div>
<div class="tab-cell" id="left-button" (click)="openMenu()">
<span>筛选</span>
</div>
</div>
</section>
<section>
<div class="research-result-details">
<div class="research-result-adv" *ngFor="let item of tagSearchList"
[routerLink]="['/product-details',item.goodsId]">
<div class="result-container-img">
<img [src]="item.picturepath">
</div>
<div class="result-container-text">
<div class="result-container-name">
<span>{{item.productname}}</span>
</div>
<div class="result-container-price">
<div class="container-price-left">
<span>￥{{item.promotionprice}}</span>/<b>盒</b>
</div>
<div class="container-price-right">
<a>已售{{item.salesVolume}}{{item.salesvolume}}</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="no-more">--暂无更多内容--</div>
<!-- <ion-app > -->
<ion-menu side="end" menuId="first" type="overlay" class="inner-scroll" class="my-custom-menu">
<ion-content>
<!-- 品牌 -->
<div ng-repeat="ite in getbrand">
<div class="select-selector">
<div class="selector-title">
<span>{{brandList.specName}}</span>
</div>
</div>
<ion-list>
<div class="select-prices" *ngFor="let index of brandList.options">
<div class="alert-brand" (click)="checkBrand(index)"><span>{{index.optionName}}</span></div>
</div>
</ion-list>
</div>
<!-- 尺寸，颜色-->
<div *ngFor="let item of specificAtions">
<div class="select-selector">
<div class="selector-title">
<span>{{item.specName}}</span>
</div>
<div class="selector-text" (click)="isNoOpen(item)">
{{item.options[0].specOptionName}}, {{item.options[1].specOptionName}}...
</div>
<div class="selector-icon" (click)="isNoOpen(item)">
<ion-icon name="chevron-down-outline" class="up-gray" *ngIf="!item.isOpen">
</ion-icon>
<ion-icon name="chevron-up-outline" class="down-gray" *ngIf="item.isOpen">
</ion-icon>
</div>
</div>
<ion-list class="open-cell" *ngIf="!item.isOpen">
<div class="select-prices" *ngFor="let index of item.options">
<div class="alert-size" (click)="checkSize(index)" [ngClass]="index.selectCell ? 'isSelect': 'noSelect'">
{{index.specOptionName}}</div>
</div>
</ion-list>
<ion-list class="normal-cell" *ngIf="item.isOpen">
<div class="select-prices" *ngFor="let index of item.options">
<div class="alert-size" (click)="checkSize(index)" [ngClass]="index.selectCell ? 'isSelect': 'noSelect'">
{{index.specOptionName}}</div>
</div>
</ion-list>
</div>
<div>
<div class="select-selector">
<div class="selector-title">
<span>价格区间(元)</span>
</div>
</div>
<ion-list>
<div class="price-area">
<ion-input class="alert-price" placeholder="最低价" type="text" [(ngModel)]="beginPrice"
(ngModelChange)='priceRegion($event)'></ion-input>
<div class="alert-bar">
<div class="bar"></div>
</div>
<ion-input class="alert-price" type="text" placeholder="最高价" [(ngModel)]="endPrice"
(ngModelChange)='priceRegion($event)'></ion-input>
</div>
</ion-list>
</div>
</ion-content>
<ion-footer>
<div class="bottom-buttons">
<div class="alert-button" (click)="onReset()">重置</div>
<div class="alert-button" (click)="onFinished()">完成</div>
</div>
</ion-footer>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
<!-- </ion-app> -->
</ion-content>
b.ts
import { Component, OnInit, ViewChild, ElementRef} from '@angular/core';
import { RestService, StorageService, AppService } from '../../service'
import { ToastController, LoadingController, NavController, MenuController } from '@ionic/angular';
import { UserInfo } from 'src/app/common/userinfo';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-product-reclassify ',
templateUrl: './product-reclassify.page.html',
styleUrls: ['./product-reclassify.page.scss'],
})
export class ProductReclassifyPage extends UserInfo implements OnInit {
public goodsId: string = ""//货物id
public tagId: string = "";//选中分类id(传参1)
public tagName: string = "";//选中分类值(传参2)
// public inputValue: string = "";//分类页搜索值(传参3)
public inputContent: string = "";//顶部搜索
public selectTag = true; //输入框内默认标签选项
public checkedBydesc = true;//价格升降序转换
public selectNoTag = false;
public tagSearchList = [];//
public sequenceList = "";//排序条件
public isZindex = true;//层级选择
public isOpen = true;//筛选选项伸缩
public specificAtions;//规格
public checkedSize = '';//选中规格(尺寸颜色)
public checkedSizes = [];
public sizeItems = "";//选中规格拼接为字符串(尺寸颜色)
public selectCell = null;//选中筛选条件
public brandList = {
specName: '',
options: '',
optionName:''
};//品牌
public checkedBrands = '';//选中品牌
public beginPrice: string = ""//最低价格
public endPrice: string = ""//最高价格
public inputPrice: string = ""//价格区间
public searchTarget=[];//搜索记录
constructor(
private rest: RestService,
private router: Router,
private activatedRoute: ActivatedRoute,
private navCtrl: NavController,
private menu: MenuController,
private loadingCtrl: LoadingController,
public appService: AppService,
public localStorageService: StorageService,
private toastCtrl: ToastController,
private el: ElementRef,
)
{
super(appService, localStorageService);
this.goodsId = this.activatedRoute.snapshot.paramMap.get('goodsId');
this.tagId = this.activatedRoute.snapshot.paramMap.get('tagId');
this.tagName = this.activatedRoute.snapshot.paramMap.get('tagName');
// this.inputValue = this.activatedRoute.snapshot.paramMap.get('inputValue');
}
//回退方法
goBack() {
this.navCtrl.back();
}
// 监听滚动条
resizeHeader(event) {
var _header = document.getElementById("detailNavBar");
let _opacity = event.detail.scrollTop / 235;
if (_opacity > 1) {
_opacity = 1
_header.setAttribute('style', 'background: rgba(255,255,255,' + _opacity + ')');
} else {
_header.setAttribute('style', 'background: rgba(255,255,255,' + _opacity + ')');
}
}
// Angular+Ionic侧边栏电商项目实现筛选功能
//产品搜索
async getProductSearch() {
const userInfo = {
'q': this.inputContent,
'pageNo': 1,
'pageSize': 16,
'order': this.sequenceList,
// 'shopId': '',
// 'isNew': 'desc',
'specOptionName': this.sizeItems,
// this.checkedSizes,
// 'customCategoryId': '',
'brand': this.checkedBrands,
'price': this.inputPrice,
'categoryId': this.tagId,
}
this.rest.apiPost(userInfo, this.rest.getProductSearch).subscribe(res => {
const { status, msg, data } = res;
if (status == 200) {
console.log("------产品分类搜索-----");
this.tagSearchList = res.data.result;
console.log(this.tagSearchList);
} else {
console.log("请求失败");
}
});
}
//筛选数据
async getListBandAnd() {
const userInfo = {
'categoryId': this.tagId,
}
this.rest.apiPost(userInfo, this.rest.getListBandAndSpecOption).subscribe(res => {
const { status, msg, data } = res;
if (status == 200) {
console.log("======筛选获取规格======");
console.log(res.data);
//品牌
this.brandList = res.data[3];
//颜色，颜色2,尺寸
let list = res.data.splice(0, 3);
this.specificAtions = list;
console.log(this.specificAtions);
console.log(this.brandList);
} else {
console.log("请求失败");
}
});
}
// inputValue
//打开侧边栏
openMenu() {
// e.stopPropagation();
this.getListBandAnd();
this.menu.enable(true, 'first')
this.menu.open("first");
console.log("aaa2");
if (this.menu.enable(true, 'first'),this.menu.open('first')) {
this.isZindex == !this.isZindex;
console.log("aaa1")
}
else if (this.menu.enable(false)) {
this.isZindex == true;
console.log("aaa2")
}
}
//筛选尺寸颜色选择
checkSize(index) {
this.specificAtions.forEach(item => {
let allCells = item.options;
allCells.forEach(itemb => {
itemb.selectCell = false;
if (index.id == itemb.id) {
itemb.selectCell = true;//选中
// this.checkedSize = index.specOptionName;
// this.checkedSizes.push(index.specOptionName);
}
});
});
if (index.selectCell == true) {
this.checkedSize = index.specOptionName;
this.checkedSizes.push(index.specOptionName);
} if (index.selectCell ==false) {
// this.checkedSize = index.specOptionName;
this.checkedSizes.splice(index, 1);
}
console.log(index.selectCell);
console.log(this.checkedSizes);
let Lists = this.checkedSizes.map(function (obj, indexa) {
return obj;
}).join(',');//转换为字符串
this.sizeItems = Lists;
console.log(this.sizeItems);
// this.checkedSizes = Object.assign(index.specOptionName,index.specOptionName);
// this.inputContent = "";
// this.sequence = "";
// this.tagId = "";
this.getProductSearch();
}
//筛选品牌选择
checkBrand(index) {
console.log("选中了");
this.checkedBrands = index.optionName;
console.log(this.checkedBrands);
this.getProductSearch();
}
//筛选打开关闭
isNoOpen(item) {
item.isOpen = !item.isOpen;
// console.log(item);
}
//筛选价格区间
priceRegion($event) {
this.inputPrice = this.beginPrice + '-' + this.endPrice;
this.getProductSearch();
console.log(this.inputPrice);
}
//重置
onReset() {
this.checkedBrands = '';
this.sizeItems = '';
this.getProductSearch();
this.menu.open('first');
}
//完成
onFinished() {
this.menu.enable(false, 'first');
this.getProductSearch();
}
//清除标签
touchTag(inputContent) {
console.log("aaaa");
this.selectTag = false;
this.tagId = "";
console.log("aaaa");
if (inputContent!==null) {
this.sequenceList=""
this.inputContent=inputContent;
this.getProductSearch();
}if (inputContent==null) {
this.sequenceList=""
this.getProductSearch();
}
}
//回车搜索
getVal(e) {
//实现防抖,设置定时器
let timer = null;
timer && clearInterval(timer)
timer = setTimeout(() => {
console.log(this.inputContent);
}, 500);
if (this.inputContent.length > 0) {
this.inputContent = this.inputContent.slice(0, 30)
}
let keycode = window.event ? e.keyCode : e.which;
if (keycode == 13) {
this.selectNoTag = true;
//获取到搜索内容
this.getProductSearch();
}
if (keycode == 27 || this.inputContent == "") {//esc键
this.selectNoTag = false;
this.getProductSearch();
}
}
//清除输入
clearInput() {
this.selectNoTag = !this.selectNoTag
this.inputContent = ""
this.getProductSearch();
}
//综合排序1
changeBymultiple() {
this.sequenceList = "1";
this.getProductSearch();
console.log(this.sequenceList);
}
//销量排序2
changeBySales() {
this.sequenceList = "2";
this.getProductSearch();
console.log(this.sequenceList);
}
//升序3降序4
changeSequence() {
this.checkedBydesc = !this.checkedBydesc
if (this.checkedBydesc==true) {
this.sequenceList = "3";
this.getProductSearch();
console.log(this.sequenceList);
} if (this.checkedBydesc!=true) {
this.sequenceList = "4";
this.getProductSearch();
console.log(this.sequenceList);
}
}
//获取分类页搜索框的historyItem
getclassifyTab(historyItems: any) {
return JSON.parse(localStorage.getItem(historyItems))
}
classifyTab() {
let searchTargetItem=null;
if(this.searchTarget!=undefined||this.searchTarget!=null){
this.searchTarget =localStorage.historyItems.split(",");//接收分类页面的输入
}
for (const key in this.searchTarget) {
console.log(+"1111");
searchTargetItem=this.searchTarget[key]
}
if (this.tagId == null && this.tagName == null) {
this.selectTag = false;//清除掉输入框标签
searchTargetItem = searchTargetItem.replace("\"", "").replace("\"", "");//去掉""
this.inputContent = searchTargetItem;
this.getProductSearch();
console.log(searchTargetItem + "获取Item2");
}
console.log(this.tagId);
console.log(this.tagName);
}
ngOnInit() {
}
ionViewWillEnter() {
this.classifyTab();
this.getProductSearch();
this.getListBandAnd();
}
}
c.scss
@import "../../../style/mixin.scss";
//产业商圈搜索页
.product-reclassify{
width: 100%;
.no-more {
width: 100%;
height: rem(80);
line-height: rem(50);
font-size: rem(32);
}
//顶部搜索
.shop-item-header {
width: rem(750);
height: rem(88);
position: fixed;
top: rem(0);
left: rem(0);
display: flex;
flex-direction: row;
justify-items: center;
background-color: white;
z-index: 1;
.onIndex {
z-index: 1;
color: orange;
}
.upIndex {
z-index: 0;
color: palegreen;
}
#detailNavBar {
display: flex;
align-items: center;
}
.shop-content-left {
width: rem(100);
height: rem(60);
display: flex;
align-items: center;
.shop-cleft-img {
width: rem(30);
height: rem(30);
margin-left: rem(30);
margin-right: rem(20);
}
}
.shop-content-right {
width: rem(100);
height: rem(60);
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-items: center;
align-items: center;
.shop-cright-img {
width: rem(30);
height: rem(30);
margin-top: rem(8);
}
.shop-cright-text {
width: rem(100);
height: rem(30);
text-align: center;
font-size: rem(18);
color: #6C6CA1;
line-height: rem(30);
}
}
.shop-item-search {
width: rem(550);
height: rem(60);
font-size: rem(28);
font-weight: 400;
color: rgba(169, 169, 169, 1);
line-height: rem(60);
display: flex;
align-items: center;
border-radius: rem(8);
background-color: #F1F2F6;
.selected-tag{
margin-left:rem(10);
margin-top: rem(5);
margin-bottom: rem(5);
min-width: rem(150);
max-width: rem(220);
height: rem(50);
line-height: rem(50);
font-size: rem(28);
color: #333333;
background:#e0e1e6;
border-radius: rem(8);
text-indent: rem(15);
.sure-tag {
width: rem(30);
height: rem(30);
background: #939496;
border-radius: 50%;
position: absolute;
top: rem(30);
left: rem(280);
.sure-outline {
width: rem(30);
height: rem(30);
position: relative;
top: rem(-5);
left: rem(-15);
color: white;
}
}
}
.shop-search-find {
width: rem(30);
height: rem(30);
margin: 0 rem(15);
};
.cancel-tag {
width: rem(30);
height: rem(30);
background:#939496;
border-radius: 50%;
position: absolute;
top: rem(30);
right: rem(120);
.close-outline {
width: rem(30);
height: rem(30);
position: relative;
top: rem(-10);
color:white;
}
}
input.shop-search {
flex: 1;
height: rem(60);
line-height: rem(60);
font-size: rem(24);
color: rgba(169, 169, 169, 1);
border: 0;
}
}
}
//顶部切换
.shop-in-tabs{
width: 100%;
//height: rem(37);
height: rem(82);
z-index: 1;
.onIndex{
z-index: 1;
background-color: orange;
}
.upIndex {
z-index: 0;
background-color: palegreen;
}
.header-tabs {
width: 100%;
height: rem(80);
line-height: rem(80);
display: flex;
align-items: center;
justify-content: center;
top: rem(88);
position: fixed;
background-color: #FFFFFF;
border-top: rem(1) solid #F1F2F6;
border-bottom: rem(1) solid #F1F2F6;
.tab-cell {
width: 25%;
text-align: center;
.menu-text{
width: 80%;
span{
width: rem(40);
height: rem(80);
line-height: rem(80);
font-size: rem(24);
color: #333333;
}
}
.to-select {
position: relative;
.to-down {
height: rem(15);
width: rem(15);
border-top: rem(15) solid transparent;
border-left: rem(15) solid transparent;
transform: rotate(225deg);
position: absolute;
top: rem(-48);
left: rem(130);
}
.to-up {
height: rem(15);
width: rem(15);
border-top: rem(15) solid transparent;
border-left: rem(15) solid transparent;
transform: rotate(45deg);
position: absolute;
top:rem(-50);
left: rem(120);
}
.downcolor {
border-right: rem(15) solid #007AFF;
}
.upcolor {
border-right: rem(15) solid gray;
}
}
span {
width: rem(40);
height: rem(80);
line-height: rem(80);
font-size: rem(24);
color: #333333;
}
span:hover {
border-bottom: 2px solid #0265ff;
}
.spanAtive {
color: #0265ff;
padding-bottom: rem(3);
border-bottom: 2px solid #0265ff;
}
}
}
.header-icon-left {
width: rem(60);
margin-top: rem(11);
height: rem(60);
background: rgba(0, 0, 0, 1);
opacity: 0.49;
border-radius: 50%;
left: rem(40);
img {
width: rem(20);
height: rem(40);
margin-left: rem(20);
margin-top: rem(12);
}
}
.header-icon-center-img {
width: rem(80);
height: rem(88);
left: rem(240);
img {
margin-top: rem(4);
width: rem(80);
height: rem(80);
}
}
.header-icon-cart {
width: rem(60);
height: rem(60);
margin-top: rem(11);
background: rgba(0, 0, 0, 1);
opacity: 0.49;
border-radius: 50%;
position: relative;
left: rem(440);
img {
width: rem(30);
height: rem(40);
margin-left: rem(12);
margin-top: rem(12);
}
}
.header-icon-message {
width: rem(60);
height: rem(60);
margin-top: rem(11);
background: rgba(0, 0, 0, 1);
opacity: 0.49;
border-radius: 50%;
position: relative;
left: rem(500);
img {
width: rem(35);
height: rem(35);
margin-left: rem(12);
margin-top: rem(12);
}
}
}
//店铺信息
.middle-rate-shop-name {
margin-top: rem(80);
width:rem(750);
height: rem(140);
display: flex;
.middle-rate-shop-name-img {
width: 20%;
height: rem(140);
img {
margin: rem(20);
width: rem(100);
height: rem(100);
}
}
.middle-rate-shop-name-text {
width: 80%;
height: rem(140);
span {
font-size: rem(22);
font-weight: 500;
color: rgba(245, 217, 108, 1);
}
.rate-shop-name-text-qzh {
height: rem(70);
font-size: rem(30);
font-weight: 400;
line-height: rem(70);
}
}
}
.middle-rate-shop-number {
width: 100%;
height: rem(130);
display: flex;
.middle-rate-shop-number-all {
width: rem(175);
height: rem(130);
text-align: center;
.shop-number-all-text {
width: rem(175);
height: rem(65);
font-size: rem(30);
color: rgba(51, 51, 51, 1);
}
span {
width: rem(175);
height: rem(65);
font-size: rem(22);
color: rgba(102, 102, 102, 1);
}
}
.middle-rate-shop-number-people {
width: rem(225);
height: rem(130);
.shop-number-people-thing {
width: rem(225);
height: rem(65);
span {
font-size: rem(22);
color: rgba(102, 102, 102, 1);
}
a {
font-size: rem(22);
color: rgba(0, 122, 255, 1);
}
}
.shop-number-people-service {
width: rem(225);
height: rem(65);
span {
font-size: rem(22);
color: rgba(102, 102, 102, 1);
}
a {
font-size: rem(22);
color: rgba(0, 122, 255, 1);
}
}
}
}
.middle-rate-shop-types {
width: 100%;
height: rem(130);
display: flex;
.middle-rate-shop-types-itemize {
width: 50%;
height: rem(130);
text-align: center;
span {
display: inline-block;
color: rgba(0, 122, 255, 1);
width: rem(160);
height: rem(60);
font-size: rem(24);
line-height: rem(60);
margin-top: rem(35);
margin-left: rem(175);
border-radius: rem(5);
border: rem(1) solid rgba(0, 122, 255, 1);
}
}
.middle-rate-shop-types-play {
width: 50%;
height: rem(130);
text-align: center;
span {
display: inline-block;
color: rgba(0, 122, 255, 1);
width: rem(160);
height: rem(60);
font-size: rem(24);
line-height: rem(60);
margin-top: rem(35);
margin-right: rem(175);
border-radius: rem(5);
border: rem(1) solid rgba(0, 122, 255, 1);
}
}
}
.shop-in-bottom-bar{
.bottom-tabs{
width: 100%;
height: rem(80);
display: flex;
align-items: center;
justify-content: center;
bottom: rem(0);
position: fixed;
background-color:oldlace ;
.tab-cell {
width: 40%;
text-align: center;
span {
width: rem(40);
height: rem(56);
font-size: rem(24);
color: #333333;
}
span:hover {
border-bottom: 2px solid #0265ff;
}
.spanAtive {
color: #0265ff;
padding-bottom: rem(3);
border-bottom: 2px solid #0265ff;
}
}
.tab-cell-service{
width: 20%;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-items: center;
align-items: center;
.shop-cright-img {
width: rem(30);
height: rem(30);
margin-top: rem(8);
}
.shop-cright-text {
width: rem(100);
height: rem(30);
text-align: center;
font-size: rem(18);
color: #6C6CA1;
line-height: rem(30);
}
}
}
}
//搜索结果展示
.research-result-details {
margin-top: rem(84);
// background-color: orange;
width:rem(750);
display: flex;
flex-direction: row;
flex-wrap: wrap;
.research-result-swipe {
width: rem(250);
height: rem(420);
}
.research-result-adv:nth-child(1n) {
border-bottom: rem(1) solid #F0F0F0;
border-right: rem(1) solid #F0F0F0;
}
.research-result-adv:nth-child(2n) {
border-bottom: rem(1) solid #F0F0F0;
}
.research-result-adv {
width:rem(374);
height: rem(500);
.result-container-img {
width: 100%;
height: rem(355);
img {
width: rem(334);
height: rem(334);
margin: rem(20) rem(20) rem(0) rem(20);
}
}
.result-container-text {
width: rem(375);
height: rem(146);
.result-container-name {
width: rem(355);
height: rem(90);
margin-left:rem(20);
padding-top: rem(20);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
overflow: hidden;
span {
font-size: rem(24);
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: rem(28);
}
}
.result-container-price {
margin: rem(10) rem(10);
width: rem(355);
height: rem(51);
line-height: rem(51);
display: flex;
.container-price-left{
width: 60%;
height: rem(51);
color:#666666;
span {
width: rem(84);
height: rem(40);
font-size: rem(20);
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color:#FF4300;
line-height: rem(20);
margin-left: rem(10);
}
}
.container-price-right{
width: 40%;
height: rem(51);
a {
display: inline-block;
width: rem(200);
height: rem(40);
line-height: rem(20);
color:#666666;
font-size: rem(20);
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(153, 153, 153, 1);
text-indent: rem(5);
}
}
}
}
}
}
//侧边栏
.my-custom-menu {
--width: 80%;
position: fixed;
--z-index: 20;
.open-cell {
width: 100%;
height: rem(160);
}
.normal {
height: rem(160);
background-color: plum;
}
.alert-brand{
width: rem(173);
height: rem(60);
line-height: rem(60);
color:#999999;
margin: rem(10) rem(20) rem(10) rem(20);
font-size: rem(24);
text-align: center;
border-radius: rem(8);
background-color: #F1F2F6;
}
.alert-brand:hover {
color: #007AFF;
font-size: rem(24);
border: rem(1) #007AFF solid;
}
.select-selector {
width: 100%;
height: rem(80);
display: flex;
.selector-title {
width: 66%;
height: rem(80);
span {
display: inline-block;
height: rem(80);
line-height: rem(80);
width: rem(173);
padding-left: rem(20);
color: #666666;
font-size: rem(24);
}
}
.selector-text {
width: 24%;
height: rem(80);
line-height: rem(80);
color: #999999;
font-size: rem(24);
text-align: end;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
overflow: hidden;
}
.selector-text:hover {
color: #007AFF;
font-size: rem(24);
}
.selector-icon {
width: 10%;
height: rem(80);
.down-gray,
.up-gray {
height: rem(40);
width: rem(60);
margin-top: rem(20);
color: rgba(153, 153, 153, 1);
}
}
}
.price-area {
display: flex;
height: rem(60);
line-height: rem(60);
.alert-price {
width: rem(260);
height: rem(60);
line-height: rem(60);
margin-left: rem(20);
color: #999999;
font-size: rem(24);
text-align: center;
background-color: #F1F2F6;
border-radius: rem(8);
}
.alert-bar {
width: rem(20);
height: rem(60);
.bar {
margin-top: rem(30);
margin-left: rem(12);
width: rem(15);
height: rem(2);
background-color: #999999;
}
}
.alert-price:hover {
border: rem(1) #007AFF solid;
background-color: #FFFFFF;
color: #007AFF;
}
}
.select-prices {
width: 33%;
overflow-y: hidden;
line-height: rem(100);
font-weight: 400;
float: left;
.alert-size {
width: rem(173);
height: rem(60);
line-height: rem(60);
margin: rem(10) rem(20) rem(10) rem(20);
font-size: rem(24);
text-align: center;
border-radius: rem(8);
}
.isSelect {
border: rem(1) #007AFF solid;
background-color: #FFFFFF;
color: #007AFF;
}
.noSelect {
color: #999999;
background-color: #F1F2F6;
}
}
.bottom-buttons {
width: 100%;
display: flex;
.alert-button {
width: 50%;
height: rem(100);
line-height: rem(100);
text-align: center;
font-size: rem(32);
color: #333333;
}
.alert-button:hover {
color: #FFFFFF;
background-color: #007AFF;
}
}
}
}
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
