ad

dist/runtime.js

@@ -1,995 +0,0 @@
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// install a JSONP callback for chunk loading
-/******/ 	function webpackJsonpCallback(data) {
-/******/ 		var chunkIds = data[0];
-/******/ 		var moreModules = data[1];
-/******/ 		var executeModules = data[2];
-/******/
-/******/ 		// add "moreModules" to the modules object,
-/******/ 		// then flag all "chunkIds" as loaded and fire callback
-/******/ 		var moduleId, chunkId, i = 0, resolves = [];
-/******/ 		for(;i < chunkIds.length; i++) {
-/******/ 			chunkId = chunkIds[i];
-/******/ 			if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
-/******/ 				resolves.push(installedChunks[chunkId][0]);
-/******/ 			}
-/******/ 			installedChunks[chunkId] = 0;
-/******/ 		}
-/******/ 		for(moduleId in moreModules) {
-/******/ 			if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
-/******/ 				modules[moduleId] = moreModules[moduleId];
-/******/ 			}
-/******/ 		}
-/******/ 		if(parentJsonpFunction) parentJsonpFunction(data);
-/******/
-/******/ 		while(resolves.length) {
-/******/ 			resolves.shift()();
-/******/ 		}
-/******/
-/******/ 		// add entry modules from loaded chunk to deferred list
-/******/ 		deferredModules.push.apply(deferredModules, executeModules || []);
-/******/
-/******/ 		// run deferred modules when all chunks ready
-/******/ 		return checkDeferredModules();
-/******/ 	};
-/******/ 	function checkDeferredModules() {
-/******/ 		var result;
-/******/ 		for(var i = 0; i < deferredModules.length; i++) {
-/******/ 			var deferredModule = deferredModules[i];
-/******/ 			var fulfilled = true;
-/******/ 			for(var j = 1; j < deferredModule.length; j++) {
-/******/ 				var depId = deferredModule[j];
-/******/ 				if(installedChunks[depId] !== 0) fulfilled = false;
-/******/ 			}
-/******/ 			if(fulfilled) {
-/******/ 				deferredModules.splice(i--, 1);
-/******/ 				result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
-/******/ 			}
-/******/ 		}
-/******/
-/******/ 		return result;
-/******/ 	}
-/******/ 	function hotDisposeChunk(chunkId) {
-/******/ 		delete installedChunks[chunkId];
-/******/ 	}
-/******/ 	var parentHotUpdateCallback = (typeof self !== 'undefined' ? self : this)["webpackHotUpdate"];
-/******/ 	(typeof self !== 'undefined' ? self : this)["webpackHotUpdate"] = // eslint-disable-next-line no-unused-vars
-/******/ 	function webpackHotUpdateCallback(chunkId, moreModules) {
-/******/ 		hotAddUpdateChunk(chunkId, moreModules);
-/******/ 		if (parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules);
-/******/ 	} ;
-/******/
-/******/ 	// eslint-disable-next-line no-unused-vars
-/******/ 	function hotDownloadUpdateChunk(chunkId) {
-/******/ 		var script = document.createElement("script");
-/******/ 		script.charset = "utf-8";
-/******/ 		script.src = __webpack_require__.p + "" + chunkId + "." + hotCurrentHash + ".hot-update.js";
-/******/ 		if (null) script.crossOrigin = null;
-/******/ 		document.head.appendChild(script);
-/******/ 	}
-/******/
-/******/ 	// eslint-disable-next-line no-unused-vars
-/******/ 	function hotDownloadManifest(requestTimeout) {
-/******/ 		requestTimeout = requestTimeout || 10000;
-/******/ 		return new Promise(function(resolve, reject) {
-/******/ 			if (typeof XMLHttpRequest === "undefined") {
-/******/ 				return reject(new Error("No browser support"));
-/******/ 			}
-/******/ 			try {
-/******/ 				var request = new XMLHttpRequest();
-/******/ 				var requestPath = __webpack_require__.p + "" + hotCurrentHash + ".hot-update.json";
-/******/ 				request.open("GET", requestPath, true);
-/******/ 				request.timeout = requestTimeout;
-/******/ 				request.send(null);
-/******/ 			} catch (err) {
-/******/ 				return reject(err);
-/******/ 			}
-/******/ 			request.onreadystatechange = function() {
-/******/ 				if (request.readyState !== 4) return;
-/******/ 				if (request.status === 0) {
-/******/ 					// timeout
-/******/ 					reject(
-/******/ 						new Error("Manifest request to " + requestPath + " timed out.")
-/******/ 					);
-/******/ 				} else if (request.status === 404) {
-/******/ 					// no update available
-/******/ 					resolve();
-/******/ 				} else if (request.status !== 200 && request.status !== 304) {
-/******/ 					// other failure
-/******/ 					reject(new Error("Manifest request to " + requestPath + " failed."));
-/******/ 				} else {
-/******/ 					// success
-/******/ 					try {
-/******/ 						var update = JSON.parse(request.responseText);
-/******/ 					} catch (e) {
-/******/ 						reject(e);
-/******/ 						return;
-/******/ 					}
-/******/ 					resolve(update);
-/******/ 				}
-/******/ 			};
-/******/ 		});
-/******/ 	}
-/******/
-/******/ 	var hotApplyOnUpdate = true;
-/******/ 	// eslint-disable-next-line no-unused-vars
-/******/ 	var hotCurrentHash = "24f484798802cd1e9b0f";
-/******/ 	var hotRequestTimeout = 10000;
-/******/ 	var hotCurrentModuleData = {};
-/******/ 	var hotCurrentChildModule;
-/******/ 	// eslint-disable-next-line no-unused-vars
-/******/ 	var hotCurrentParents = [];
-/******/ 	// eslint-disable-next-line no-unused-vars
-/******/ 	var hotCurrentParentsTemp = [];
-/******/
-/******/ 	// eslint-disable-next-line no-unused-vars
-/******/ 	function hotCreateRequire(moduleId) {
-/******/ 		var me = installedModules[moduleId];
-/******/ 		if (!me) return __webpack_require__;
-/******/ 		var fn = function(request) {
-/******/ 			if (me.hot.active) {
-/******/ 				if (installedModules[request]) {
-/******/ 					if (installedModules[request].parents.indexOf(moduleId) === -1) {
-/******/ 						installedModules[request].parents.push(moduleId);
-/******/ 					}
-/******/ 				} else {
-/******/ 					hotCurrentParents = [moduleId];
-/******/ 					hotCurrentChildModule = request;
-/******/ 				}
-/******/ 				if (me.children.indexOf(request) === -1) {
-/******/ 					me.children.push(request);
-/******/ 				}
-/******/ 			} else {
-/******/ 				console.warn(
-/******/ 					"[HMR] unexpected require(" +
-/******/ 						request +
-/******/ 						") from disposed module " +
-/******/ 						moduleId
-/******/ 				);
-/******/ 				hotCurrentParents = [];
-/******/ 			}
-/******/ 			return __webpack_require__(request);
-/******/ 		};
-/******/ 		var ObjectFactory = function ObjectFactory(name) {
-/******/ 			return {
-/******/ 				configurable: true,
-/******/ 				enumerable: true,
-/******/ 				get: function() {
-/******/ 					return __webpack_require__[name];
-/******/ 				},
-/******/ 				set: function(value) {
-/******/ 					__webpack_require__[name] = value;
-/******/ 				}
-/******/ 			};
-/******/ 		};
-/******/ 		for (var name in __webpack_require__) {
-/******/ 			if (
-/******/ 				Object.prototype.hasOwnProperty.call(__webpack_require__, name) &&
-/******/ 				name !== "e" &&
-/******/ 				name !== "t"
-/******/ 			) {
-/******/ 				Object.defineProperty(fn, name, ObjectFactory(name));
-/******/ 			}
-/******/ 		}
-/******/ 		fn.e = function(chunkId) {
-/******/ 			if (hotStatus === "ready") hotSetStatus("prepare");
-/******/ 			hotChunksLoading++;
-/******/ 			return __webpack_require__.e(chunkId).then(finishChunkLoading, function(err) {
-/******/ 				finishChunkLoading();
-/******/ 				throw err;
-/******/ 			});
-/******/
-/******/ 			function finishChunkLoading() {
-/******/ 				hotChunksLoading--;
-/******/ 				if (hotStatus === "prepare") {
-/******/ 					if (!hotWaitingFilesMap[chunkId]) {
-/******/ 						hotEnsureUpdateChunk(chunkId);
-/******/ 					}
-/******/ 					if (hotChunksLoading === 0 && hotWaitingFiles === 0) {
-/******/ 						hotUpdateDownloaded();
-/******/ 					}
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 		fn.t = function(value, mode) {
-/******/ 			if (mode & 1) value = fn(value);
-/******/ 			return __webpack_require__.t(value, mode & ~1);
-/******/ 		};
-/******/ 		return fn;
-/******/ 	}
-/******/
-/******/ 	// eslint-disable-next-line no-unused-vars
-/******/ 	function hotCreateModule(moduleId) {
-/******/ 		var hot = {
-/******/ 			// private stuff
-/******/ 			_acceptedDependencies: {},
-/******/ 			_declinedDependencies: {},
-/******/ 			_selfAccepted: false,
-/******/ 			_selfDeclined: false,
-/******/ 			_selfInvalidated: false,
-/******/ 			_disposeHandlers: [],
-/******/ 			_main: hotCurrentChildModule !== moduleId,
-/******/
-/******/ 			// Module API
-/******/ 			active: true,
-/******/ 			accept: function(dep, callback) {
-/******/ 				if (dep === undefined) hot._selfAccepted = true;
-/******/ 				else if (typeof dep === "function") hot._selfAccepted = dep;
-/******/ 				else if (typeof dep === "object")
-/******/ 					for (var i = 0; i < dep.length; i++)
-/******/ 						hot._acceptedDependencies[dep[i]] = callback || function() {};
-/******/ 				else hot._acceptedDependencies[dep] = callback || function() {};
-/******/ 			},
-/******/ 			decline: function(dep) {
-/******/ 				if (dep === undefined) hot._selfDeclined = true;
-/******/ 				else if (typeof dep === "object")
-/******/ 					for (var i = 0; i < dep.length; i++)
-/******/ 						hot._declinedDependencies[dep[i]] = true;
-/******/ 				else hot._declinedDependencies[dep] = true;
-/******/ 			},
-/******/ 			dispose: function(callback) {
-/******/ 				hot._disposeHandlers.push(callback);
-/******/ 			},
-/******/ 			addDisposeHandler: function(callback) {
-/******/ 				hot._disposeHandlers.push(callback);
-/******/ 			},
-/******/ 			removeDisposeHandler: function(callback) {
-/******/ 				var idx = hot._disposeHandlers.indexOf(callback);
-/******/ 				if (idx >= 0) hot._disposeHandlers.splice(idx, 1);
-/******/ 			},
-/******/ 			invalidate: function() {
-/******/ 				this._selfInvalidated = true;
-/******/ 				switch (hotStatus) {
-/******/ 					case "idle":
-/******/ 						hotUpdate = {};
-/******/ 						hotUpdate[moduleId] = modules[moduleId];
-/******/ 						hotSetStatus("ready");
-/******/ 						break;
-/******/ 					case "ready":
-/******/ 						hotApplyInvalidatedModule(moduleId);
-/******/ 						break;
-/******/ 					case "prepare":
-/******/ 					case "check":
-/******/ 					case "dispose":
-/******/ 					case "apply":
-/******/ 						(hotQueuedInvalidatedModules =
-/******/ 							hotQueuedInvalidatedModules || []).push(moduleId);
-/******/ 						break;
-/******/ 					default:
-/******/ 						// ignore requests in error states
-/******/ 						break;
-/******/ 				}
-/******/ 			},
-/******/
-/******/ 			// Management API
-/******/ 			check: hotCheck,
-/******/ 			apply: hotApply,
-/******/ 			status: function(l) {
-/******/ 				if (!l) return hotStatus;
-/******/ 				hotStatusHandlers.push(l);
-/******/ 			},
-/******/ 			addStatusHandler: function(l) {
-/******/ 				hotStatusHandlers.push(l);
-/******/ 			},
-/******/ 			removeStatusHandler: function(l) {
-/******/ 				var idx = hotStatusHandlers.indexOf(l);
-/******/ 				if (idx >= 0) hotStatusHandlers.splice(idx, 1);
-/******/ 			},
-/******/
-/******/ 			//inherit from previous dispose call
-/******/ 			data: hotCurrentModuleData[moduleId]
-/******/ 		};
-/******/ 		hotCurrentChildModule = undefined;
-/******/ 		return hot;
-/******/ 	}
-/******/
-/******/ 	var hotStatusHandlers = [];
-/******/ 	var hotStatus = "idle";
-/******/
-/******/ 	function hotSetStatus(newStatus) {
-/******/ 		hotStatus = newStatus;
-/******/ 		for (var i = 0; i < hotStatusHandlers.length; i++)
-/******/ 			hotStatusHandlers[i].call(null, newStatus);
-/******/ 	}
-/******/
-/******/ 	// while downloading
-/******/ 	var hotWaitingFiles = 0;
-/******/ 	var hotChunksLoading = 0;
-/******/ 	var hotWaitingFilesMap = {};
-/******/ 	var hotRequestedFilesMap = {};
-/******/ 	var hotAvailableFilesMap = {};
-/******/ 	var hotDeferred;
-/******/
-/******/ 	// The update info
-/******/ 	var hotUpdate, hotUpdateNewHash, hotQueuedInvalidatedModules;
-/******/
-/******/ 	function toModuleId(id) {
-/******/ 		var isNumber = +id + "" === id;
-/******/ 		return isNumber ? +id : id;
-/******/ 	}
-/******/
-/******/ 	function hotCheck(apply) {
-/******/ 		if (hotStatus !== "idle") {
-/******/ 			throw new Error("check() is only allowed in idle status");
-/******/ 		}
-/******/ 		hotApplyOnUpdate = apply;
-/******/ 		hotSetStatus("check");
-/******/ 		return hotDownloadManifest(hotRequestTimeout).then(function(update) {
-/******/ 			if (!update) {
-/******/ 				hotSetStatus(hotApplyInvalidatedModules() ? "ready" : "idle");
-/******/ 				return null;
-/******/ 			}
-/******/ 			hotRequestedFilesMap = {};
-/******/ 			hotWaitingFilesMap = {};
-/******/ 			hotAvailableFilesMap = update.c;
-/******/ 			hotUpdateNewHash = update.h;
-/******/
-/******/ 			hotSetStatus("prepare");
-/******/ 			var promise = new Promise(function(resolve, reject) {
-/******/ 				hotDeferred = {
-/******/ 					resolve: resolve,
-/******/ 					reject: reject
-/******/ 				};
-/******/ 			});
-/******/ 			hotUpdate = {};
-/******/ 			for(var chunkId in installedChunks)
-/******/ 			// eslint-disable-next-line no-lone-blocks
-/******/ 			{
-/******/ 				hotEnsureUpdateChunk(chunkId);
-/******/ 			}
-/******/ 			if (
-/******/ 				hotStatus === "prepare" &&
-/******/ 				hotChunksLoading === 0 &&
-/******/ 				hotWaitingFiles === 0
-/******/ 			) {
-/******/ 				hotUpdateDownloaded();
-/******/ 			}
-/******/ 			return promise;
-/******/ 		});
-/******/ 	}
-/******/
-/******/ 	// eslint-disable-next-line no-unused-vars
-/******/ 	function hotAddUpdateChunk(chunkId, moreModules) {
-/******/ 		if (!hotAvailableFilesMap[chunkId] || !hotRequestedFilesMap[chunkId])
-/******/ 			return;
-/******/ 		hotRequestedFilesMap[chunkId] = false;
-/******/ 		for (var moduleId in moreModules) {
-/******/ 			if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
-/******/ 				hotUpdate[moduleId] = moreModules[moduleId];
-/******/ 			}
-/******/ 		}
-/******/ 		if (--hotWaitingFiles === 0 && hotChunksLoading === 0) {
-/******/ 			hotUpdateDownloaded();
-/******/ 		}
-/******/ 	}
-/******/
-/******/ 	function hotEnsureUpdateChunk(chunkId) {
-/******/ 		if (!hotAvailableFilesMap[chunkId]) {
-/******/ 			hotWaitingFilesMap[chunkId] = true;
-/******/ 		} else {
-/******/ 			hotRequestedFilesMap[chunkId] = true;
-/******/ 			hotWaitingFiles++;
-/******/ 			hotDownloadUpdateChunk(chunkId);
-/******/ 		}
-/******/ 	}
-/******/
-/******/ 	function hotUpdateDownloaded() {
-/******/ 		hotSetStatus("ready");
-/******/ 		var deferred = hotDeferred;
-/******/ 		hotDeferred = null;
-/******/ 		if (!deferred) return;
-/******/ 		if (hotApplyOnUpdate) {
-/******/ 			// Wrap deferred object in Promise to mark it as a well-handled Promise to
-/******/ 			// avoid triggering uncaught exception warning in Chrome.
-/******/ 			// See https://bugs.chromium.org/p/chromium/issues/detail?id=465666
-/******/ 			Promise.resolve()
-/******/ 				.then(function() {
-/******/ 					return hotApply(hotApplyOnUpdate);
-/******/ 				})
-/******/ 				.then(
-/******/ 					function(result) {
-/******/ 						deferred.resolve(result);
-/******/ 					},
-/******/ 					function(err) {
-/******/ 						deferred.reject(err);
-/******/ 					}
-/******/ 				);
-/******/ 		} else {
-/******/ 			var outdatedModules = [];
-/******/ 			for (var id in hotUpdate) {
-/******/ 				if (Object.prototype.hasOwnProperty.call(hotUpdate, id)) {
-/******/ 					outdatedModules.push(toModuleId(id));
-/******/ 				}
-/******/ 			}
-/******/ 			deferred.resolve(outdatedModules);
-/******/ 		}
-/******/ 	}
-/******/
-/******/ 	function hotApply(options) {
-/******/ 		if (hotStatus !== "ready")
-/******/ 			throw new Error("apply() is only allowed in ready status");
-/******/ 		options = options || {};
-/******/ 		return hotApplyInternal(options);
-/******/ 	}
-/******/
-/******/ 	function hotApplyInternal(options) {
-/******/ 		hotApplyInvalidatedModules();
-/******/
-/******/ 		var cb;
-/******/ 		var i;
-/******/ 		var j;
-/******/ 		var module;
-/******/ 		var moduleId;
-/******/
-/******/ 		function getAffectedStuff(updateModuleId) {
-/******/ 			var outdatedModules = [updateModuleId];
-/******/ 			var outdatedDependencies = {};
-/******/
-/******/ 			var queue = outdatedModules.map(function(id) {
-/******/ 				return {
-/******/ 					chain: [id],
-/******/ 					id: id
-/******/ 				};
-/******/ 			});
-/******/ 			while (queue.length > 0) {
-/******/ 				var queueItem = queue.pop();
-/******/ 				var moduleId = queueItem.id;
-/******/ 				var chain = queueItem.chain;
-/******/ 				module = installedModules[moduleId];
-/******/ 				if (
-/******/ 					!module ||
-/******/ 					(module.hot._selfAccepted && !module.hot._selfInvalidated)
-/******/ 				)
-/******/ 					continue;
-/******/ 				if (module.hot._selfDeclined) {
-/******/ 					return {
-/******/ 						type: "self-declined",
-/******/ 						chain: chain,
-/******/ 						moduleId: moduleId
-/******/ 					};
-/******/ 				}
-/******/ 				if (module.hot._main) {
-/******/ 					return {
-/******/ 						type: "unaccepted",
-/******/ 						chain: chain,
-/******/ 						moduleId: moduleId
-/******/ 					};
-/******/ 				}
-/******/ 				for (var i = 0; i < module.parents.length; i++) {
-/******/ 					var parentId = module.parents[i];
-/******/ 					var parent = installedModules[parentId];
-/******/ 					if (!parent) continue;
-/******/ 					if (parent.hot._declinedDependencies[moduleId]) {
-/******/ 						return {
-/******/ 							type: "declined",
-/******/ 							chain: chain.concat([parentId]),
-/******/ 							moduleId: moduleId,
-/******/ 							parentId: parentId
-/******/ 						};
-/******/ 					}
-/******/ 					if (outdatedModules.indexOf(parentId) !== -1) continue;
-/******/ 					if (parent.hot._acceptedDependencies[moduleId]) {
-/******/ 						if (!outdatedDependencies[parentId])
-/******/ 							outdatedDependencies[parentId] = [];
-/******/ 						addAllToSet(outdatedDependencies[parentId], [moduleId]);
-/******/ 						continue;
-/******/ 					}
-/******/ 					delete outdatedDependencies[parentId];
-/******/ 					outdatedModules.push(parentId);
-/******/ 					queue.push({
-/******/ 						chain: chain.concat([parentId]),
-/******/ 						id: parentId
-/******/ 					});
-/******/ 				}
-/******/ 			}
-/******/
-/******/ 			return {
-/******/ 				type: "accepted",
-/******/ 				moduleId: updateModuleId,
-/******/ 				outdatedModules: outdatedModules,
-/******/ 				outdatedDependencies: outdatedDependencies
-/******/ 			};
-/******/ 		}
-/******/
-/******/ 		function addAllToSet(a, b) {
-/******/ 			for (var i = 0; i < b.length; i++) {
-/******/ 				var item = b[i];
-/******/ 				if (a.indexOf(item) === -1) a.push(item);
-/******/ 			}
-/******/ 		}
-/******/
-/******/ 		// at begin all updates modules are outdated
-/******/ 		// the "outdated" status can propagate to parents if they don't accept the children
-/******/ 		var outdatedDependencies = {};
-/******/ 		var outdatedModules = [];
-/******/ 		var appliedUpdate = {};
-/******/
-/******/ 		var warnUnexpectedRequire = function warnUnexpectedRequire() {
-/******/ 			console.warn(
-/******/ 				"[HMR] unexpected require(" + result.moduleId + ") to disposed module"
-/******/ 			);
-/******/ 		};
-/******/
-/******/ 		for (var id in hotUpdate) {
-/******/ 			if (Object.prototype.hasOwnProperty.call(hotUpdate, id)) {
-/******/ 				moduleId = toModuleId(id);
-/******/ 				/** @type {TODO} */
-/******/ 				var result;
-/******/ 				if (hotUpdate[id]) {
-/******/ 					result = getAffectedStuff(moduleId);
-/******/ 				} else {
-/******/ 					result = {
-/******/ 						type: "disposed",
-/******/ 						moduleId: id
-/******/ 					};
-/******/ 				}
-/******/ 				/** @type {Error|false} */
-/******/ 				var abortError = false;
-/******/ 				var doApply = false;
-/******/ 				var doDispose = false;
-/******/ 				var chainInfo = "";
-/******/ 				if (result.chain) {
-/******/ 					chainInfo = "\nUpdate propagation: " + result.chain.join(" -> ");
-/******/ 				}
-/******/ 				switch (result.type) {
-/******/ 					case "self-declined":
-/******/ 						if (options.onDeclined) options.onDeclined(result);
-/******/ 						if (!options.ignoreDeclined)
-/******/ 							abortError = new Error(
-/******/ 								"Aborted because of self decline: " +
-/******/ 									result.moduleId +
-/******/ 									chainInfo
-/******/ 							);
-/******/ 						break;
-/******/ 					case "declined":
-/******/ 						if (options.onDeclined) options.onDeclined(result);
-/******/ 						if (!options.ignoreDeclined)
-/******/ 							abortError = new Error(
-/******/ 								"Aborted because of declined dependency: " +
-/******/ 									result.moduleId +
-/******/ 									" in " +
-/******/ 									result.parentId +
-/******/ 									chainInfo
-/******/ 							);
-/******/ 						break;
-/******/ 					case "unaccepted":
-/******/ 						if (options.onUnaccepted) options.onUnaccepted(result);
-/******/ 						if (!options.ignoreUnaccepted)
-/******/ 							abortError = new Error(
-/******/ 								"Aborted because " + moduleId + " is not accepted" + chainInfo
-/******/ 							);
-/******/ 						break;
-/******/ 					case "accepted":
-/******/ 						if (options.onAccepted) options.onAccepted(result);
-/******/ 						doApply = true;
-/******/ 						break;
-/******/ 					case "disposed":
-/******/ 						if (options.onDisposed) options.onDisposed(result);
-/******/ 						doDispose = true;
-/******/ 						break;
-/******/ 					default:
-/******/ 						throw new Error("Unexception type " + result.type);
-/******/ 				}
-/******/ 				if (abortError) {
-/******/ 					hotSetStatus("abort");
-/******/ 					return Promise.reject(abortError);
-/******/ 				}
-/******/ 				if (doApply) {
-/******/ 					appliedUpdate[moduleId] = hotUpdate[moduleId];
-/******/ 					addAllToSet(outdatedModules, result.outdatedModules);
-/******/ 					for (moduleId in result.outdatedDependencies) {
-/******/ 						if (
-/******/ 							Object.prototype.hasOwnProperty.call(
-/******/ 								result.outdatedDependencies,
-/******/ 								moduleId
-/******/ 							)
-/******/ 						) {
-/******/ 							if (!outdatedDependencies[moduleId])
-/******/ 								outdatedDependencies[moduleId] = [];
-/******/ 							addAllToSet(
-/******/ 								outdatedDependencies[moduleId],
-/******/ 								result.outdatedDependencies[moduleId]
-/******/ 							);
-/******/ 						}
-/******/ 					}
-/******/ 				}
-/******/ 				if (doDispose) {
-/******/ 					addAllToSet(outdatedModules, [result.moduleId]);
-/******/ 					appliedUpdate[moduleId] = warnUnexpectedRequire;
-/******/ 				}
-/******/ 			}
-/******/ 		}
-/******/
-/******/ 		// Store self accepted outdated modules to require them later by the module system
-/******/ 		var outdatedSelfAcceptedModules = [];
-/******/ 		for (i = 0; i < outdatedModules.length; i++) {
-/******/ 			moduleId = outdatedModules[i];
-/******/ 			if (
-/******/ 				installedModules[moduleId] &&
-/******/ 				installedModules[moduleId].hot._selfAccepted &&
-/******/ 				// removed self-accepted modules should not be required
-/******/ 				appliedUpdate[moduleId] !== warnUnexpectedRequire &&
-/******/ 				// when called invalidate self-accepting is not possible
-/******/ 				!installedModules[moduleId].hot._selfInvalidated
-/******/ 			) {
-/******/ 				outdatedSelfAcceptedModules.push({
-/******/ 					module: moduleId,
-/******/ 					parents: installedModules[moduleId].parents.slice(),
-/******/ 					errorHandler: installedModules[moduleId].hot._selfAccepted
-/******/ 				});
-/******/ 			}
-/******/ 		}
-/******/
-/******/ 		// Now in "dispose" phase
-/******/ 		hotSetStatus("dispose");
-/******/ 		Object.keys(hotAvailableFilesMap).forEach(function(chunkId) {
-/******/ 			if (hotAvailableFilesMap[chunkId] === false) {
-/******/ 				hotDisposeChunk(chunkId);
-/******/ 			}
-/******/ 		});
-/******/
-/******/ 		var idx;
-/******/ 		var queue = outdatedModules.slice();
-/******/ 		while (queue.length > 0) {
-/******/ 			moduleId = queue.pop();
-/******/ 			module = installedModules[moduleId];
-/******/ 			if (!module) continue;
-/******/
-/******/ 			var data = {};
-/******/
-/******/ 			// Call dispose handlers
-/******/ 			var disposeHandlers = module.hot._disposeHandlers;
-/******/ 			for (j = 0; j < disposeHandlers.length; j++) {
-/******/ 				cb = disposeHandlers[j];
-/******/ 				cb(data);
-/******/ 			}
-/******/ 			hotCurrentModuleData[moduleId] = data;
-/******/
-/******/ 			// disable module (this disables requires from this module)
-/******/ 			module.hot.active = false;
-/******/
-/******/ 			// remove module from cache
-/******/ 			delete installedModules[moduleId];
-/******/
-/******/ 			// when disposing there is no need to call dispose handler
-/******/ 			delete outdatedDependencies[moduleId];
-/******/
-/******/ 			// remove "parents" references from all children
-/******/ 			for (j = 0; j < module.children.length; j++) {
-/******/ 				var child = installedModules[module.children[j]];
-/******/ 				if (!child) continue;
-/******/ 				idx = child.parents.indexOf(moduleId);
-/******/ 				if (idx >= 0) {
-/******/ 					child.parents.splice(idx, 1);
-/******/ 				}
-/******/ 			}
-/******/ 		}
-/******/
-/******/ 		// remove outdated dependency from module children
-/******/ 		var dependency;
-/******/ 		var moduleOutdatedDependencies;
-/******/ 		for (moduleId in outdatedDependencies) {
-/******/ 			if (
-/******/ 				Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)
-/******/ 			) {
-/******/ 				module = installedModules[moduleId];
-/******/ 				if (module) {
-/******/ 					moduleOutdatedDependencies = outdatedDependencies[moduleId];
-/******/ 					for (j = 0; j < moduleOutdatedDependencies.length; j++) {
-/******/ 						dependency = moduleOutdatedDependencies[j];
-/******/ 						idx = module.children.indexOf(dependency);
-/******/ 						if (idx >= 0) module.children.splice(idx, 1);
-/******/ 					}
-/******/ 				}
-/******/ 			}
-/******/ 		}
-/******/
-/******/ 		// Now in "apply" phase
-/******/ 		hotSetStatus("apply");
-/******/
-/******/ 		if (hotUpdateNewHash !== undefined) {
-/******/ 			hotCurrentHash = hotUpdateNewHash;
-/******/ 			hotUpdateNewHash = undefined;
-/******/ 		}
-/******/ 		hotUpdate = undefined;
-/******/
-/******/ 		// insert new code
-/******/ 		for (moduleId in appliedUpdate) {
-/******/ 			if (Object.prototype.hasOwnProperty.call(appliedUpdate, moduleId)) {
-/******/ 				modules[moduleId] = appliedUpdate[moduleId];
-/******/ 			}
-/******/ 		}
-/******/
-/******/ 		// call accept handlers
-/******/ 		var error = null;
-/******/ 		for (moduleId in outdatedDependencies) {
-/******/ 			if (
-/******/ 				Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)
-/******/ 			) {
-/******/ 				module = installedModules[moduleId];
-/******/ 				if (module) {
-/******/ 					moduleOutdatedDependencies = outdatedDependencies[moduleId];
-/******/ 					var callbacks = [];
-/******/ 					for (i = 0; i < moduleOutdatedDependencies.length; i++) {
-/******/ 						dependency = moduleOutdatedDependencies[i];
-/******/ 						cb = module.hot._acceptedDependencies[dependency];
-/******/ 						if (cb) {
-/******/ 							if (callbacks.indexOf(cb) !== -1) continue;
-/******/ 							callbacks.push(cb);
-/******/ 						}
-/******/ 					}
-/******/ 					for (i = 0; i < callbacks.length; i++) {
-/******/ 						cb = callbacks[i];
-/******/ 						try {
-/******/ 							cb(moduleOutdatedDependencies);
-/******/ 						} catch (err) {
-/******/ 							if (options.onErrored) {
-/******/ 								options.onErrored({
-/******/ 									type: "accept-errored",
-/******/ 									moduleId: moduleId,
-/******/ 									dependencyId: moduleOutdatedDependencies[i],
-/******/ 									error: err
-/******/ 								});
-/******/ 							}
-/******/ 							if (!options.ignoreErrored) {
-/******/ 								if (!error) error = err;
-/******/ 							}
-/******/ 						}
-/******/ 					}
-/******/ 				}
-/******/ 			}
-/******/ 		}
-/******/
-/******/ 		// Load self accepted modules
-/******/ 		for (i = 0; i < outdatedSelfAcceptedModules.length; i++) {
-/******/ 			var item = outdatedSelfAcceptedModules[i];
-/******/ 			moduleId = item.module;
-/******/ 			hotCurrentParents = item.parents;
-/******/ 			hotCurrentChildModule = moduleId;
-/******/ 			try {
-/******/ 				__webpack_require__(moduleId);
-/******/ 			} catch (err) {
-/******/ 				if (typeof item.errorHandler === "function") {
-/******/ 					try {
-/******/ 						item.errorHandler(err);
-/******/ 					} catch (err2) {
-/******/ 						if (options.onErrored) {
-/******/ 							options.onErrored({
-/******/ 								type: "self-accept-error-handler-errored",
-/******/ 								moduleId: moduleId,
-/******/ 								error: err2,
-/******/ 								originalError: err
-/******/ 							});
-/******/ 						}
-/******/ 						if (!options.ignoreErrored) {
-/******/ 							if (!error) error = err2;
-/******/ 						}
-/******/ 						if (!error) error = err;
-/******/ 					}
-/******/ 				} else {
-/******/ 					if (options.onErrored) {
-/******/ 						options.onErrored({
-/******/ 							type: "self-accept-errored",
-/******/ 							moduleId: moduleId,
-/******/ 							error: err
-/******/ 						});
-/******/ 					}
-/******/ 					if (!options.ignoreErrored) {
-/******/ 						if (!error) error = err;
-/******/ 					}
-/******/ 				}
-/******/ 			}
-/******/ 		}
-/******/
-/******/ 		// handle errors in accept handlers and self accepted module load
-/******/ 		if (error) {
-/******/ 			hotSetStatus("fail");
-/******/ 			return Promise.reject(error);
-/******/ 		}
-/******/
-/******/ 		if (hotQueuedInvalidatedModules) {
-/******/ 			return hotApplyInternal(options).then(function(list) {
-/******/ 				outdatedModules.forEach(function(moduleId) {
-/******/ 					if (list.indexOf(moduleId) < 0) list.push(moduleId);
-/******/ 				});
-/******/ 				return list;
-/******/ 			});
-/******/ 		}
-/******/
-/******/ 		hotSetStatus("idle");
-/******/ 		return new Promise(function(resolve) {
-/******/ 			resolve(outdatedModules);
-/******/ 		});
-/******/ 	}
-/******/
-/******/ 	function hotApplyInvalidatedModules() {
-/******/ 		if (hotQueuedInvalidatedModules) {
-/******/ 			if (!hotUpdate) hotUpdate = {};
-/******/ 			hotQueuedInvalidatedModules.forEach(hotApplyInvalidatedModule);
-/******/ 			hotQueuedInvalidatedModules = undefined;
-/******/ 			return true;
-/******/ 		}
-/******/ 	}
-/******/
-/******/ 	function hotApplyInvalidatedModule(moduleId) {
-/******/ 		if (!Object.prototype.hasOwnProperty.call(hotUpdate, moduleId))
-/******/ 			hotUpdate[moduleId] = modules[moduleId];
-/******/ 	}
-/******/
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// object to store loaded and loading chunks
-/******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
-/******/ 	// Promise = chunk loading, 0 = chunk loaded
-/******/ 	var installedChunks = {
-/******/ 		"runtime": 0
-/******/ 	};
-/******/
-/******/ 	var deferredModules = [];
-/******/
-/******/ 	// script path function
-/******/ 	function jsonpScriptSrc(chunkId) {
-/******/ 		return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + ".js"
-/******/ 	}
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {},
-/******/ 			hot: hotCreateModule(moduleId),
-/******/ 			parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),
-/******/ 			children: []
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/ 	// This file contains only the entry chunk.
-/******/ 	// The chunk loading function for additional chunks
-/******/ 	__webpack_require__.e = function requireEnsure(chunkId) {
-/******/ 		var promises = [];
-/******/
-/******/
-/******/ 		// JSONP chunk loading for javascript
-/******/
-/******/ 		var installedChunkData = installedChunks[chunkId];
-/******/ 		if(installedChunkData !== 0) { // 0 means "already installed".
-/******/
-/******/ 			// a Promise means "currently loading".
-/******/ 			if(installedChunkData) {
-/******/ 				promises.push(installedChunkData[2]);
-/******/ 			} else {
-/******/ 				// setup Promise in chunk cache
-/******/ 				var promise = new Promise(function(resolve, reject) {
-/******/ 					installedChunkData = installedChunks[chunkId] = [resolve, reject];
-/******/ 				});
-/******/ 				promises.push(installedChunkData[2] = promise);
-/******/
-/******/ 				// start chunk loading
-/******/ 				var script = document.createElement('script');
-/******/ 				var onScriptComplete;
-/******/
-/******/ 				script.charset = 'utf-8';
-/******/ 				script.timeout = 120;
-/******/ 				if (__webpack_require__.nc) {
-/******/ 					script.setAttribute("nonce", __webpack_require__.nc);
-/******/ 				}
-/******/ 				script.src = jsonpScriptSrc(chunkId);
-/******/
-/******/ 				// create error before stack unwound to get useful stacktrace later
-/******/ 				var error = new Error();
-/******/ 				onScriptComplete = function (event) {
-/******/ 					// avoid mem leaks in IE.
-/******/ 					script.onerror = script.onload = null;
-/******/ 					clearTimeout(timeout);
-/******/ 					var chunk = installedChunks[chunkId];
-/******/ 					if(chunk !== 0) {
-/******/ 						if(chunk) {
-/******/ 							var errorType = event && (event.type === 'load' ? 'missing' : event.type);
-/******/ 							var realSrc = event && event.target && event.target.src;
-/******/ 							error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
-/******/ 							error.name = 'ChunkLoadError';
-/******/ 							error.type = errorType;
-/******/ 							error.request = realSrc;
-/******/ 							chunk[1](error);
-/******/ 						}
-/******/ 						installedChunks[chunkId] = undefined;
-/******/ 					}
-/******/ 				};
-/******/ 				var timeout = setTimeout(function(){
-/******/ 					onScriptComplete({ type: 'timeout', target: script });
-/******/ 				}, 120000);
-/******/ 				script.onerror = script.onload = onScriptComplete;
-/******/ 				document.head.appendChild(script);
-/******/ 			}
-/******/ 		}
-/******/ 		return Promise.all(promises);
-/******/ 	};
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "/";
-/******/
-/******/ 	// on error function for async loading
-/******/ 	__webpack_require__.oe = function(err) { console.error(err); throw err; };
-/******/
-/******/ 	// __webpack_hash__
-/******/ 	__webpack_require__.h = function() { return hotCurrentHash; };
-/******/
-/******/ 	var jsonpArray = (typeof self !== 'undefined' ? self : this)["webpackJsonp"] = (typeof self !== 'undefined' ? self : this)["webpackJsonp"] || [];
-/******/ 	var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
-/******/ 	jsonpArray.push = webpackJsonpCallback;
-/******/ 	jsonpArray = jsonpArray.slice();
-/******/ 	for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
-/******/ 	var parentJsonpFunction = oldJsonpFunction;
-/******/
-/******/
-/******/ 	// run deferred modules from other chunks
-/******/ 	checkDeferredModules();
-/******/ })
-/************************************************************************/
-/******/ ([]);

src/layout/index.vue

@@ -8,7 +8,7 @@
       safe-area-inset-bottom
       placeholder
       active-color="#F4D022"
-      inactive-color="#B8BDC5"
+      inactive-color="#666666"
       route
     >
       <van-tabbar-item

src/views/address/component/addrList.vue

@@ -17,6 +17,13 @@
           </p>
         </div>
         <div class="handle">
+          <div class="is_model" :class="{'checked':iconname==cardData[i].id}"
+               @click.stop="modelcheck(cardData[i].id)">
+
+            <van-icon name="checked" size="14" v-show="iconname==cardData[i].id"/>
+            <van-icon name="passed" size="14" v-show="iconname!=cardData[i].id"/>
+            <span>设为默认</span>
+          </div>
           <div class="del" @click.stop="del(cardData[i].id)">
             <img
               src="@/assets/images/delete/del.png"
@@ -30,7 +37,6 @@
           </div>
           <div class="edit" @click.stop="handleEdit(cardData[i])">
             <img src="@/assets/images/delete/select.png" />
-
             <span>编辑</span>
           </div>
         </div>
@@ -54,6 +60,7 @@ export default {
       id: "",
       sum: 0,
       isShow: false,
+      iconname:0,
       //   newTime: "",
       cardData: [],
       parmValue: {
@@ -91,6 +98,11 @@ export default {
     handleSelect(e) {
       this.$emit("select", e);
     },
+    modelcheck(e){
+      console.log(e)
+      this.iconname = this.iconname==e ? '0':e;
+
+    },
     // getNewTime() {
     //   this.newTime = new Date().valueOf();
     // },
@@ -177,43 +189,56 @@ export default {
   height: 50vh;
   //   border: 1px solid red;
   .addressList {
-    width: 90vw;
+    width: 90%;
     margin: 16.5px auto;
-    background-color: #fcfcf0;
     background: #fcfcf0;
     border-radius: 8px;
     .addressDetai {
       padding: 25px 0 0 0;
       .addrTitle {
-        width: 80vw;
+        width: calc(100% - 40px);
         margin: 0 auto;
+        padding:0 20px 10px ;
+        border-bottom: 1px solid #a5a5a3;
         span:first-child {
           padding-right: 15px;
         }
         span {
-          height: 13px;
-          font-size: 14px;
+          font-size: 1.2em;
           font-family: Source Han Sans CN;
           font-weight: 500;
           color: #4d4d4d;
-          line-height: 13px;
         }
         p {
-          height: 12px;
-          font-size: 12px;
+          font-size:1em;
           font-family: Source Han Sans CN;
           font-weight: 400;
           color: #999999;
-          line-height: 12px;
-          margin-top: 6px;
+          margin: 6px 0;
         }
       }
       .handle {
         z-index: 99999;
-        width: 80vw;
+        width: 80%;
         margin: 0 auto;
         height: 20px;
-        padding: 0 0 10px 0;
+        padding: 10px;
+        .is_model{
+          display: inline-block;
+          span{
+            margin-left: 5px;
+            font-size: 1em;
+            font-family: Source Han Sans CN;
+            font-weight: 500;
+            color: #888888;
+          }
+        }
+        .checked{
+          color:#C69C63;
+          span{
+            color:#C69C63;
+          }
+        }
         .edit,
         .del {
           margin: 2px 5px;
@@ -225,6 +250,10 @@ export default {
             vertical-align: -2px;
           }
           span {
+            font-size: 1em;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            color: #333333;
             display: inline-block;
             padding: 0 0 0 2px;
           }

src/views/address/index.vue

@@ -224,10 +224,17 @@ export default {
     border-color: rgb(255, 131, 39);
   }
   .van-address-list__bottom {
+    background: unset;
+    margin-bottom: 30px;
     button.van-button--danger {
       // background: linear-gradient(-180deg, #fcce56, rgb(255, 131, 39), #f9680f);
       background-color: #e6e6dc;
       border: 0;
+      border-radius: 10px!important;
+      color:#282826;
+      font-size: 1.2em;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
     }
   }
   .addmore {

src/views/login/index.vue

@@ -1,37 +1,26 @@
 <template>
   <div class="login">
-    <div class="bg">
-      <!-- <img :src="loginBG" alt="" /> -->
-    </div>
     <div class="login-main">
       <div class="logo-header">
         <div class="login-img">
-          <img src="@/assets/img/login.png" alt="" />
+          <div class="login-tip">
+            <p class="logo-header-title">Hello！</p>
+            <p class="logo-header-tips">欢迎登录藏金·1745平台</p>
+          </div>
         </div>
-        <p class="logo-header-title">Hello</p>
-        <p class="logo-header-tips">欢迎登录藏金·1745平台</p>
+      </div>
+      <div class="loginBox">
         <van-form validate-first class="login-form">
-          <div class="loginBox">
-            <!-- <img src="@/assets/img/loginBox.png" alt="" /> -->
-
-            <ul class="clear oUl" style="width: 83vw">
-              <!-- <li class="label">
-            卡号:
-           
-          </li> -->
-              <li class="van-field-input">
-                <van-row style="width: 83vw">
-                  <van-col span="3" style="width: 14px">
-                    <div class="cardNo">
-                      <img src="@/assets/img/cardNo.png" alt="" />
-                    </div>
-                  </van-col>
-                  <van-col span="5" style="width: 42px">
-                    <div class="myCard">CJ1745</div>
-                  </van-col>
-                  <van-col span="16" style="width: calc(100% - 86px)">
-                    <van-field
-                      style="margin: 0 0 0 30px; background: transParent"
+              <van-row >
+                <van-col span="3"  class="input-tips">
+                  <div class="cardNo">
+                  </div>
+                </van-col>
+                <van-col span="6">
+                  <div class="myCard">CJ1745</div>
+                </van-col>
+                <van-col span="15" class="card-input">
+                  <van-field
                       size="large"
                       v-model="form.mobile"
                       name="mobile"
@@ -39,27 +28,17 @@
                       type="text"
                       maxlength="6"
                       :rules="[{ validator: asyncmobileValidator }]"
-                    >
-                    </van-field>
-                  </van-col>
-                </van-row>
-              </li>
-            </ul>
-            <ul class="clear" style="width: 83vw; border-radius: 10px">
-              <!-- <li class="label">
-            密码:
-            <img src="@/assets/img/password.png" alt="" />
-          </li> -->
-              <van-row style="width: 84vw">
-                <van-col span="3" style="width: 14px">
-                  <div class="cardPwd">
-                    <img src="@/assets/img/password.png" alt="" />
-                  </div>
+                  >
+                  </van-field>
                 </van-col>
-                <van-col :span="21" style="width: calc(100% - 50px)">
-                  <li class="van-field-input">
-                    <van-field
-                      style="background: transparent; margin: 0 0 0 28px"
+              </van-row>
+            <van-row style="margin-top: 55px;">
+              <van-col span="3" class="input-tips" >
+                <div class="cardPwd">
+                </div>
+              </van-col>
+              <van-col :span="21">
+                  <van-field
                       size="large"
                       v-model="form.code"
                       name="code"
@@ -68,14 +47,11 @@
                       :rules="[{ validator: asyncpwodValidator }]"
                       :type="!passwordStatus ? 'password' : 'text'"
                       @click-right-icon="showPassword"
-                    >
-                      <!--  :right-icon="!passwordStatus ? 'eye-o' : 'closed-eye'" -->
-                    </van-field>
-                  </li>
-                </van-col></van-row
-              >
-            </ul>
-          </div>
+                  >
+                    <!--  :right-icon="!passwordStatus ? 'eye-o' : 'closed-eye'" -->
+                  </van-field>
+              </van-col>
+            </van-row>
         </van-form>
       </div>
       <van-button
@@ -230,162 +206,61 @@ export default {
 <style lang="scss" scoped>
 .login {
   //最外层的登陆盒子
-  position: relative;
   width: 100%;
   height: 100%;
-  .bg {
-    //背景图的盒子
-    position: relative;
-    width: 100%;
-    height: 100%;
-    img {
-      //背景图
-      display: inline-block;
-      width: 100%;
-      height: 100%;
-    }
-  }
   .login-main {
-    //详情登陆页面
-    position: absolute;
-    top: 0;
-    left: 0;
     width: 100%; //继承最外层login的宽高
     height: 100%;
     background-color: #e6e6dc;
     .logo-header {
       //上半部分登陆盒子，用来展示一张图片
       width: 100%;
-      height: 355px;
+      height: 35%;
       .login-img {
         width: 100%;
+        position: relative;
+        height: 100%;
+        background: url("../../assets/img/login.png") no-repeat center;
+        background-size: 100% 100%;
+      }
+      .login-tip{
         position: absolute;
-
-        left: 0;
-        top: 0;
-        img {
-          width: 100%;
-          // height: 209px;
-          height: 232px; //新版
-        }
+        left:10%;
+        top:30%;
       }
-      position: relative;
-      top: -12px;
       .logo-header-title {
-        //登陆字体的盒子
-        // margin: 0px 0 0 0;
-        // font-weight: bold;
-        padding: 0px 211px 0px 28.5px;
-        // width: 81px;
-        // height: 37px;
-        // font-size: 20px;
-        // font-weight: bold;
-        // color: #ffffff;
-        // line-height: 20px;
-        position: absolute;
-        // 新版
-        width: 62.5px;
-        height: 18.5px;
         font-size: 25px;
         font-family: DIN;
         font-weight: bold;
         color: #daad70;
-        line-height: 159.5px;
+        margin: 10px 0;
       }
       .logo-header-tips {
-        //登陆文字下提示内容
-        position: absolute;
-        // left: 0;
-        // top: 0;
-        // padding-top: 0;
-        padding: 40px 211px 0px 28.5px;
-        // width: 97px;
-        // height: 12px;
-        // font-size: 12px;
-        // font-weight: 150;
-        // color: #ffffff;
-        // line-height: 3px;
-        // 新版
-        width: 136.5px;
-        height: 12.5px;
-        font-size: 13px;
+        font-size: 14px;
         font-family: Source Han Sans CN;
         font-weight: 200;
         color: #daad70;
-        line-height: 159.5px;
+        margin: 10px 0;
       }
     }
     .loginBox {
-      width: 84vw;
-      height: 50vw;
-      margin: 0 auto 0;
-      background: url("../../assets/img/loginBox.png") no-repeat;
+      width: 80%;
+      height: 180px;
+      margin: auto;
+      background: url("../../assets/img/loginBox.png") no-repeat center;
       background-size: 100% 100%;
-      // border: 1px solid red;
       border-radius: 10px;
-      position: absolute;
-      left: 8vw;
-      top: 8vw;
-      // margin: 0 30.5px 0 28.5px;
-
-      top: -59px;
-      // z-index: 99999;
-      img {
-        width: 100%;
-      }
+      position: relative;
+      top:-6%;
     }
     .login-form.van-form {
-      //登陆框
-      // padding: 10% 18%;
-      // background-color: #fff;
-      // background-color: #e6e6dc; //新版
-
-      background: #e6e6dc;
-      // border-top-left-radius: 20px;
-      // border-top-right-radius: 20px;
-      position: relative;
-      // top: -145px;
-      top: 232.5px; //新版
-      left: 0;
-      // border: 1px solid green;
-      ul {
-        position: relative;
-        left: 0vw;
-        top: 9vw;
-        // border-radius: 20px;
-        overflow: hidden;
-        // margin: 0 0 11.5px 30px;
-        // border-bottom: 1px solid #f0f0f0;
-        z-index: 9999;
-        li {
-          float: left;
-          &.label {
-            width: 100%;
-            color: #333333;
-            font-size: 16px;
-            font-weight: bolder;
-          }
-          &.van-field-input {
-            float: left;
-            box-sizing: border-box;
-            width: 100%;
-            margin: 0 0 0 0;
-            .van-cell {
-              height: 42px;
-              line-height: 42px;
-            }
-          }
-        }
-      }
-      ul:last-child {
-        top: 14vw;
-      }
+      width: 80%;
+      position: absolute;
+      top:calc(20% - 10px);
+      left: 5%;
       .van-cell--large {
         padding: 0;
         input {
-          height: 42px;
-          line-height: 42px;
-          font-size: 15px;
         }
         .van-field__label {
           line-height: 42px;
@@ -394,20 +269,22 @@ export default {
         }
       }
     }
+    .input-tips{
+      position: relative;
+      top:5px;
+      div{
+        margin: auto;
+      }
+    }
     .van-button--small.van-button--plain {
       border: 0;
     }
     .login-form-button.van-button,
     .login-form-button.van-button--disabled {
       border: 0;
-      // margin: 98px auto 10px auto;
-      position: absolute;
-      left: 5vw;
-      bottom: 30vh;
+       margin: auto;
       color: #333;
       // background: #f4d022;
-      background: linear-gradient(0deg, #f2c482, #a07947);
-      border-radius: 34px;
       // width: 334px;
       width: 90vw;
       height: 45px;
@@ -417,42 +294,25 @@ export default {
   }
 
   .myCard {
-    position: relative;
-    padding: 0 0 0 26px;
-    height: 42px;
-    line-height: 42px;
-    z-index: 99999;
-    width: 45px;
-    height: 41px;
-    font-size: 13px;
     font-family: Source Han Sans CN;
     font-weight: 400;
     color: #111111;
-    line-height: 41px;
+    line-height: 25px;
+    text-align: center;
   }
   .cardNo {
-    width: 14px;
-    height: 11px;
-    vertical-align: 10px;
-    // padding: 15.5px 0 0 21px;
-    top: 4vw;
-    left: 4vw;
-    position: absolute;
-    img {
-      width: 14px;
-      height: 11px;
-    }
+    width: 16px;
+    height: 16px;
+    background: url("../../assets/img/cardNo.png") no-repeat center;
+    background-size: 100% 100%;
+    line-height: 25px;
   }
   .cardPwd {
-    width: 14px;
-    height: 11px;
-    top: 4vw;
-    left: 4vw;
-    position: absolute;
-    img {
-      width: 12px;
-      height: 14px;
-    }
+    width: 16px;
+    height: 16px;
+    background: url("../../assets/img/password.png") no-repeat center;
+    background-size: 100% 100%;
+    line-height: 25px;
   }
   .footerP {
     width: 100vw;

src/views/my/index.vue

@@ -1,14 +1,10 @@
 <template>
   <div class="my">
-    <!-- <van-nav-bar title="我的" class="van-nav-bar-my-fixed" fixed /> -->
-    <!-- right-text="登出"
-       -->
     <div class="mine-resume">
       <div class="bgImg">
-        <img src="@/assets/images/my/personal/bgImg.png" alt="" />
-      </div>
+
       <div class="my-info">
-        <img src="@/assets/images/my/personal/my-info.png" alt="" />
+<!--        <img src="@/assets/images/my/personal/my-info.png" alt="" />-->
         <div class="mine-resume-main">
           <ul class="clear headerBox">
             <div class="headerImg">
@@ -32,7 +28,7 @@
           </ul>
         </div>
       </div>
-
+      </div>
       <div class="top">
         <!-- 我的页面下待收，待发、售后盒子 -->
         <p>我的订单</p>
@@ -69,21 +65,22 @@
             </div>
           </div>
         </div>
-        <div class="my-btn-main">
-          <!-- <van-button
-            class="my-button"
-            block
-            type="info"
-            @click.native="logout()"
-          >
-            退出登录
-          </van-button> -->
-          <div class="footer">
-            <img src="@/assets/images/my/footer.png" />
-          </div>
-          <div style="height: 50px"></div>
-        </div>
+
       </div>
+      <div class="my-btn-main">
+      <!-- <van-button
+        class="my-button"
+        block
+        type="info"
+        @click.native="logout()"
+      >
+        退出登录
+      </van-button> -->
+      <div class="footer">
+        <img src="@/assets/images/my/footer.png" />
+      </div>
+      <div style="height: 50px"></div>
+    </div>
     </div>
   </div>
 </template>
@@ -217,26 +214,18 @@ export default {
   width: 100%;
   height: 100%;
   .mine-resume {
-    padding-top: 46px;
     position: relative;
     box-sizing: border-box;
     width: 100%;
-    height: 100vh;
     background: #e6e6dc;
 
     .mine-resume-main {
       // background:linear-gradient(0deg, rgba(255,255,255,.1) 0%, #fff 80%);;
       // background-color: #fff;
-      padding: 0 0;
-      // margin: -19vh 0 0 0;
-      left: 10px;
-      top: 20px;
-      position: absolute;
-
+      padding: 20px;
       ul {
         background: transparent;
         li {
-          float: left;
           &:first-child {
             width: calc(100% - 60px);
             p {
@@ -269,16 +258,12 @@ export default {
         }
       }
       .headerBox {
-        width: 80vw;
-        margin: 0px auto;
+        margin: 0 auto;
       }
       .headerImg {
         width: 47.5px;
         height: 47.5px;
         border-radius: 50%;
-        // position: absolute;
-        // left: 35px;
-        // top: 20px;
         img {
           width: 100%;
           border-radius: 50%;
@@ -308,39 +293,23 @@ export default {
         }
       }
       .headerDesc {
-        width: 90vw;
-        overflow: hidden;
         display: flex;
         height: 19px;
-        margin: 0 0 0 -10px;
+        width: 100%;
+        justify-content: space-between;
+        margin-top: 80px;
         .usable {
-          // width: 188px;
-          // height: 19px;
-          margin: 0 5px 0 0;
-          width: 52vw;
           font-size: 0.5rem;
           font-family: Source Han Sans CN;
           font-weight: 400;
           color: #5c3501;
-          line-height: 10px;
-          height: 13px;
-          // position: absolute;
-          overflow: hidden;
-          left: 30px;
-          top: 110px;
         }
         .header-username {
           margin: 0 0px 0 10px;
-
           font-size: 0.5rem;
           font-family: Source Han Sans CN;
           font-weight: 500;
           color: #5c3501;
-          line-height: 10px;
-          height: 10px;
-          // position: absolute;
-          left: 235px;
-          top: 110px;
         }
       }
     }
@@ -376,19 +345,11 @@ export default {
     }
 
     .my-btn-main {
-      width: 321.5px;
-      margin: 40px auto 0;
+      width: 90%;
+      margin: 40px auto;
       box-sizing: border-box;
-      // .my-button {
-      //   box-sizing: border-box;
-      //   display: inline-block;
-      //   border-radius: 20px;
-      //   background: #dbdbdb;
-      //   border: 0;
-      // }
+     padding-bottom: 60px;
       .footer {
-        width: 321.5px;
-        height: 95px;
         img {
           width: 100%;
         }
@@ -396,20 +357,18 @@ export default {
     }
     //  <!-- 我的页面下待收，待发、售后盒子 -->
     .top {
-      width: 100%;
-      padding: 0 20px;
+      width: 90%;
+      margin:auto;
       box-sizing: border-box;
       background: #e6e6dc;
-      margin: 0vh 0 0 0;
+      margin-top: 90px;
       // height:140px;
       p {
-        width: 64.5px;
-        height: 15px;
         font-size: 16px;
         font-family: Source Han Sans CN;
         font-weight: 400;
         color: #242424;
-        line-height: 13px;
+        margin:10px 0;
       }
       .vip-box {
         height: 70px;
@@ -436,11 +395,9 @@ export default {
     /**vip服务区域样式 */
     .cell-vip {
       // width: 331px;
-      height: 81px;
       background: #fcfcf0;
       border-radius: 16px;
-      padding: 10px 0px 20px 0;
-      height: 50px;
+      padding: 10px 20px;
       display: flex;
       margin: 0 0 0 0px;
       .cell-my-img {
@@ -457,7 +414,6 @@ export default {
         color: #8a8a8a;
       }
       .vip-item {
-        height: 45px;
         display: inline-block;
         flex: 1;
         text-align: center;
@@ -479,39 +435,27 @@ export default {
   }
 
   .common {
-    margin: 10px;
-    width: 110px;
-    height: 26px;
-    font-size: 14px;
-    font-weight: 600;
-    color: #333333;
-    line-height: 26px;
-    position: relative;
-    top: 0;
-    left: 0;
-    padding: 8px 0px 8px 15px;
+    font-size: 16px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #242424;
+    margin:10px 0;
   }
 
   .bottom {
-    width: 100vw;
+    width: 90%;
     box-sizing: border-box;
     background: #e6e6dc;
-    margin: 0 0 0 0;
-    p {
-      margin: 0;
-    }
+    margin:20px auto;
+
     /**地址栏收获样式 */
     .cell-list {
-      padding: 0 20px;
-      height: 81px;
       background: #fcfcf0;
       border-radius: 16px;
-      padding: 10px 0px;
-      height: 50px;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
-      margin: 0 20px;
+      padding:  20px;
       .van-cell__title {
         width: 200px;
         position: relative;
@@ -526,7 +470,6 @@ export default {
         flex: 1;
         text-align: center;
         .detaile-box {
-          width: 20vw;
           margin: 0 auto;
           text-align: center;
           .cell-my-img {
@@ -537,7 +480,7 @@ export default {
             img {
               display: inline-block;
               height: 25px;
-              width: auto;
+              width: 25px;
               margin: 0 auto;
             }
           }
@@ -555,41 +498,35 @@ export default {
   .bgImg {
     width: 100%;
     height: 246px;
-    position: absolute;
-    top: 0px;
-    img {
-      width: 100%;
-    }
-  }
-  .my-info {
-    width: 90vw;
-    // float: left;
+    background: url("../../assets/images/my/personal/bgImg.png") no-repeat center;
+    background-size:100% 100%;
     position: relative;
-    left: 0;
-    top: 0;
-    margin: 15vh auto 0;
-    img {
-      position: relative;
-
-      width: 100%;
-    }
   }
-  @media screen and (min-width: 320px) {
-    .mine-resume .mine-resume-main .headerDesc {
-      margin-top: 27px;
-    }
-  }
-  @media screen and (min-width: 375px) {
-    .mine-resume .mine-resume-main .headerDesc {
-      margin-top: 53px;
-      margin: 53px 0 0 5px;
-    }
-  }
-  @media screen and (min-width: 414px) {
-    .mine-resume .mine-resume-main .headerDesc {
-      margin-top: 53px;
-      margin: 66px 0 0 5px;
-    }
+  .my-info {
+    width: 90%;
+    position: absolute;
+    left: 5%;
+    bottom: -65px;
+    margin: auto;
+    background: url("../../assets/images/my/personal/my-info.png") no-repeat center;
+    background-size:100% 100%;
   }
+  //@media screen and (min-width: 320px) {
+  //  .mine-resume .mine-resume-main .headerDesc {
+  //    margin-top: 27px;
+  //  }
+  //}
+  //@media screen and (min-width: 375px) {
+  //  .mine-resume .mine-resume-main .headerDesc {
+  //    margin-top: 53px;
+  //    margin: 53px 0 0 5px;
+  //  }
+  //}
+  //@media screen and (min-width: 414px) {
+  //  .mine-resume .mine-resume-main .headerDesc {
+  //    margin-top: 53px;
+  //    margin: 66px 0 0 5px;
+  //  }
+  //}
 }
 </style>

src/views/paddy/index.vue

@@ -1,26 +1,21 @@
 <template>
   <div class="paddy">
-    <div class="bgImg">
-      <img src="@/assets/images/home/bgImg.png" alt="" />
-    </div>
-
     <div class="top">
-      <!-- <img src="@/assets/images/home/paddy.png" alt="" /> -->
       <van-swipe
         class="my-swipe"
         :autoplay="3000"
         indicator-color="#DAAD71"
         @change="onChange"
       >
-        <van-swipe-item style="width: 90vw">
+        <van-swipe-item>
           <img
             src="@/assets/images/home/swipper/swipper1.png"
             alt=""
-            style="width: 100%"
+            style="width:100%;"
           />
         </van-swipe-item>
         <van-swipe-item>
-          <img src="@/assets/images/home/swipper/swipper2.png" alt="" />
+          <img src="@/assets/images/home/swipper/swipper2.png" alt=""  style="width:100%;"/>
         </van-swipe-item>
         <template #indicator>
           <ul class="oUl">
@@ -61,16 +56,16 @@
       <div class="baozhuangBox">
         <li @click="goto('/referMenu', '五常大米-实惠装')">
           <div class="riceBag">
-            <p class="riceBag-title">实惠装</p>
+<!--            <p class="riceBag-title">实惠装</p>-->
+            <img src="@/assets/images/home/detail/bag.png" alt="" />
           </div>
-
-          <img src="@/assets/images/home/detail/bag.png" alt="" />
         </li>
         <li @click="goto('/referMenu', '五常大米-礼盒装')">
-          <div class="riceBox">
-            <p class="riceBox-title">礼盒装</p>
+          <div class="riceBag riceBox">
+<!--            <p class="riceBag-title">礼盒装</p>-->
+            <img src="@/assets/images/home/detail/box.png" alt="" />
           </div>
-          <img src="@/assets/images/home/detail/box.png" alt="" />
+
         </li>
       </div>
 
@@ -80,84 +75,71 @@
     <div class="middle">
       <p>产品优势</p>
       <!-- 每个元素的两侧间隔相等 -->
-      <van-row type="flex" justify="center">
+      <van-row type="flex" justify="space-between">
         <van-col
           span="12"
-          style="padding: 2px 0px 0px 0"
           @click="goto('/live', '实时监控')"
+          style="padding-right: 5px"
         >
           <div class="card">
-            <img
-              src="@/assets/images/home/middle/cardOne.png"
-              alt=""
-              style="width: 40vw"
-            />
-            <p class="first">实时监控</p>
-            <p class="second">全程溯源信赖保证</p>
-            <div class="lastP">
-              <p>查看更多</p>
+            <div class="card-text">
+              <p class="first">实时监控</p>
+              <p class="second">全程溯源<br/>信赖保证</p>
+              <div class="lastP">
+                <p>查看更多</p>
+              </div>
+            </div>
+            <div class="camera">
+              <img src="@/assets/images/home/middle/camera.png" alt="" />
             </div>
-          </div>
-          <div class="camera">
-            <img src="@/assets/images/home/middle/camera.png" alt="" />
           </div>
         </van-col>
-        <van-col span="12" style="padding: 0px 0 0px 0px">
-          <van-col span="24" style="padding: 0 0 5px 0">
+        <van-col span="12"  style="padding-left: 5px">
+          <van-col span="24" >
             <div class="cardTwo" @click="goto('/referMenu', '恒温保鲜')">
-              <img
-                src="@/assets/images/home/middle/cardTwo.png"
-                alt=""
-                style="width: 41vw"
-              />
-              <p class="first">恒温保鲜</p>
-              <p class="second">带壳归仓恒温仓储</p>
+              <div class="cardTwo-text">
+                <p class="first">恒温保鲜</p>
+                <p class="second">带壳归仓<br/>恒温仓储</p>
+              </div>
               <div class="keepAlive">
                 <img src="@/assets/images/home/middle/keepAlive.png" alt="" />
               </div>
             </div>
-
             <!-- <img src="@/assets/images/home/middle/keepAlive.png" alt="" /> -->
           </van-col>
-          <van-col span="24" style="padding: 0 0 0px 0">
-            <div class="cardThree" @click="goto('/referMenu', '现磨鲜米')">
-              <img
-                src="@/assets/images/home/middle/cardTwo.png"
-                alt=""
-                style="width: 41vw"
-              />
-              <p class="first">现磨鲜米</p>
-              <p class="second">现磨现发随享鲜香</p>
-              <div class="freshRice">
+          <van-col span="24" style="padding-top: 5px">
+            <div class="cardTwo cardThree" @click="goto('/referMenu', '现磨鲜米')">
+              <div class="cardTwo-text">
+                <p class="first">现磨鲜米</p>
+                <p class="second">现磨现发<br/>随享鲜香</p>
+              </div>
+
+              <div class="freshRice keepAlive">
                 <img src="@/assets/images/home/middle/freshRice.png" alt="" />
               </div>
             </div>
           </van-col>
         </van-col>
-        <van-col span="12">
-          <div class="cardFour" @click="goto('/referMenu', '自然耕种')">
-            <img
-              src="@/assets/images/home/middle/cardTwo.png"
-              alt=""
-              style="width: 40vw"
-            />
+      </van-row>
+      <van-row style="margin-top: 5px">
+        <van-col span="12" style="padding-right: 5px">
+          <div class="cardFour cardTwo" @click="goto('/referMenu', '自然耕种')">
+          <div class="cardTwo-text">
             <p class="first">自然耕种</p>
-            <p class="second">农耕记忆山水乡愁</p>
-            <div class="normalGrow">
+            <p class="second">农耕记忆<br/>山水乡愁</p>
+          </div>
+            <div class="normalGrow keepAlive">
               <img src="@/assets/images/home/middle/normalGrow.png" alt="" />
             </div>
           </div>
         </van-col>
-        <van-col span="12">
-          <div class="cardFive" @click="goto('/referMenu', '生态有机')">
-            <img
-              src="@/assets/images/home/middle/cardTwo.png"
-              alt=""
-              style="width: 41vw"
-            />
-            <p class="first">生态有机</p>
-            <p class="second">黄金纬度黑金厚土</p>
-            <div class="organic">
+        <van-col span="12" style="padding-left: 5px">
+          <div class="cardFive cardTwo" @click="goto('/referMenu', '生态有机')">
+           <div class="cardTwo-text">
+             <p class="first">生态有机</p>
+             <p class="second">黄金纬度<br/>黑金厚土</p>
+           </div>
+            <div class="organic keepAlive">
               <img src="@/assets/images/home/middle/organic.png" alt="" />
             </div>
           </div>
@@ -224,37 +206,22 @@ export default {
 <style lang="scss" scoped>
 .paddy {
   overflow: scroll;
-  position: relative;
-  .bgImg {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    // height: 948px;
-    img {
-      width: 100%;
-    }
-  }
+  background: url("../../assets/images/home/bgImg.png") no-repeat center!important;
+  background-size: 100% 100%!important;
   .top {
-    width: 90vw;
-    margin: 34.5px auto 0 auto;
-    img {
-      width: 90vw;
-    }
+    width: 90%;
+    margin:10px auto 0;
+    height: 150px;
+    img{
+      height: 150px;
+    };
   }
   .bottom {
-    width: 90vw;
-    height: 108px;
-    overflow: hidden;
-    margin: 0 auto;
-    z-index: 99999;
-    position: relative;
-    left: 0;
-    // display: flex;
-    // position: relative;
-    bottom: 0;
+    width: 90%;
+    margin: 20px auto 50px;
+
     img {
-      width: 90vw;
+      width: 100%;
     }
   }
   .oUl {
@@ -282,35 +249,25 @@ export default {
     margin-top: 2px;
   }
   .centerBtn {
-    z-index: 99;
-    width: 90vw;
-    height: 65px;
-    position: relative;
+    width: 90%;
     display: flex;
     justify-content: center;
-    // top: 209px;
-    margin: 0 auto 0 auto;
+    margin: 30px auto;
     li {
       height: 100%;
       margin: 0 auto;
-
       list-style: none;
       text-align: center;
       img {
-        width: 45px;
-        height: 45px;
+        width: calc(100% - 60px);;
       }
       p {
-        margin: 0 auto;
-        width: 48px;
-        height: 12px;
-
-        font-size: 12px;
+        margin: 10px auto 0;
+        font-size: 1.2em;
         font-family: Source Han Sans CN;
         font-weight: 200;
         color: #dab082;
-        line-height: 13px;
-
+        line-height: 3vh;
         background: linear-gradient(
           -4deg,
           #b8925c 0%,
@@ -324,158 +281,131 @@ export default {
     }
   }
   .detail {
-    width: 84vw;
-    height: 20vh;
-    // margin: 3vh auto 0;
-    position: relative;
-    top: 5vw;
-    // left: 8vw;
-    margin: 0 auto;
+    width: 90%;
+    margin:0 auto 40px;
     .baozhuangBox {
       display: flex;
-      justify-content: center;
+      justify-content: space-between;
     }
-    // display: flex;
-    // justify-content: center;
     p {
-      width: 125px;
-      height: 15.5px;
-      font-size: 16px;
+      font-size: 1.4em;
       font-family: Source Han Sans CN;
       font-weight: 500;
       color: #daad70;
       line-height: 15px;
-      margin: 0px 0 10px 5px;
     }
     li {
-      float: left;
       list-style: none;
-      width: 40vw;
-      height: 105px;
-      margin: 0 auto;
-      img {
-        width: 100%;
-      }
+      width: 45%;
       .riceBag {
-        width: 43px;
-        height: 14px;
-        background: #613c0c;
-        border-radius: 10px 0;
+        display: inline-block;
+        //background: #613c0c;
         text-align: center;
-        position: absolute;
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        .riceBag-title {
-          margin: 0;
-          // width: 26.5px;
-          transform: scale(0.8);
-          width: 36.5px;
-          height: 17.5px;
-          font-size: 0.5rem;
-          font-family: Source Han Sans CN;
-          font-weight: 150;
-          color: #f1cda9;
-          line-height: 16.5px;
+        position: relative;
+        img {
+          width: 100%;
         }
       }
-      .riceBox {
-        width: 43px;
-        height: 14px;
-        background: #613c0c;
+      .riceBag:before {
+        content: "实惠装";
+        display: inline-block;
+        transform: scale(0.8);
+        width: 50px;
+        height: 20px;
+        line-height: 20px;
+        font-size: 0.5rem;
         border-radius: 10px 0;
-        text-align: center;
+        font-family: Source Han Sans CN;
+        font-weight: 150;
+        color: #f1cda9;
+        top:-2px;
+        left:-5px;
+        background: #613c0c;
         position: absolute;
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        .riceBox-title {
-          margin: 0;
-          // width: 26.5px;
-          transform: scale(0.8);
-          width: 36.5px;
-          height: 17.5px;
-          font-size: 0.75rem;
-          font-family: Source Han Sans CN;
-          font-weight: 150;
-          color: #f1cda9;
-        }
       }
+      .riceBox:before {
+        content: "礼盒装";
+      }
+      //.riceBox {
+      //  width: 43px;
+      //  height: 14px;
+      //  background: #613c0c;
+      //  border-radius: 10px 0;
+      //  text-align: center;
+      //  position: absolute;
+      //
+      //  display: flex;
+      //  justify-content: center;
+      //  align-items: center;
+      //  .riceBox-title {
+      //    margin: 0;
+      //    // width: 26.5px;
+      //    transform: scale(0.8);
+      //    width: 36.5px;
+      //    height: 17.5px;
+      //    font-size: 0.75rem;
+      //    font-family: Source Han Sans CN;
+      //    font-weight: 150;
+      //    color: #f1cda9;
+      //  }
+      //}
     }
   }
   .middle {
-    width: 86vw;
-    margin: 3vh auto 15px;
-    position: relative;
+    width: 90%;
+    margin:auto;
     p {
-      margin: 0 0 10px 5px;
-      width: 126px;
-      height: 15.5px;
-      font-size: 16px;
+      font-size: 1.4em;
       font-family: Source Han Sans CN;
       font-weight: 500;
       color: #daad70;
-      line-height: 15px;
     }
     img {
       width: 100%;
     }
     .card {
-      width: 45vw;
-      // position: absolute;
+      width: 100%;
+      height: 185px;
+      background:linear-gradient(0deg, #A2794D, #BA9363, #CBA66F, #D7B27A, #E3C48A, #E3D097);
+      border-radius: 10px;
+      padding: 10px 0;
       display: flex;
       justify-content: center;
-      align-items: center;
+      .card-text{
+        display: inline-block;
+        width:calc(100% - 16vw);
+        padding-top: 40px;
+        padding-left: 10px;
+      }
       .first {
-        position: absolute;
-        width: 78.5px;
-        height: 14px;
-        font-size: 15px;
+        font-size: 1em;
         font-family: Source Han Sans CN;
         font-weight: 500;
         color: #613c0c;
-        line-height: 3px;
-        left: 3vw;
-        top: 10vh;
+        margin-left: calc(50% - 30px);
       }
       .second {
-        // margin: -21vh 0 0 5vw;
-        position: absolute;
-        top: 9vh;
-        left: 4vw;
         // margin: 1vh 0 0 6vw;
-        width: 48px;
-        height: 24px;
-        font-size: 11px;
+        font-size: .8em;
         font-family: Source Han Sans CN;
         font-weight: 300;
         color: #613c0c;
-        line-height: 12px;
+        margin-left: calc(50% - 30px);
       }
       .lastP {
-        width: 52px;
-        height: 17px;
         background: #0f0b06;
         border-radius: 13px;
-        position: absolute;
-        top: 15vh;
-        left: 4vw;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        width: 50px;
+        text-align: center;
+        margin-left: calc(50% - 30px);
         p {
-          margin: 0;
+          margin:auto;
           transform: scale(0.8);
-          width: 48px;
-          height: 12px;
           line-height: 12px;
           font-size: 0.5rem;
           font-family: Source Han Sans CN;
           font-weight: 300;
           color: #c5a06b;
-          line-height: 11.5px;
           background: linear-gradient(0deg, #a57d50 0%, #e3d097 100%);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
@@ -483,259 +413,169 @@ export default {
       }
     }
     .camera {
-      width: 20vw;
-      position: absolute;
-      left: 22vw;
-      top: 6vh;
+      width: 16vw;
+      display: inline-block;
+      text-align: center;
+      margin-right: 10px;
+      padding-top: 40px;
+      img{
+        display: inline-block;
+        width: 16vw;
+        min-width: 40px;
+      }
       // margin: 4vh 0 0 12vh;
     }
     .cardTwo {
-      width: 40vw;
       display: flex;
-      margin: 0 auto;
-      // justify-content: center;
-      // align-items: center;
+      height: 100px;
+      background:linear-gradient(0deg, #A2794D, #BA9363, #CBA66F, #D7B27A, #E3C48A, #E3D097);
+      border-radius: 10px;
+      justify-content: space-around;
+      .cardTwo-text{
+        width: 60%;
+        padding-top: 10px;
+      }
       .first {
-        position: absolute;
-        left: 44vw;
-        top: 16vh;
-        margin: -9vh 0 0 5vw;
-        width: 60px;
-        height: 14.5px;
-        font-size: 15px;
+        font-size:1em;
         font-family: Source Han Sans CN;
         font-weight: 500;
         color: #613c0c;
-        line-height: 6px;
+        padding-left: 30%;
       }
       .second {
-        position: absolute;
-        left: 47vw;
-        top: 9vh;
-        margin: 0 0 0 5vw;
-        width: 48px;
-        height: 24px;
-        font-size: 11px;
+        font-size: .8em;
         font-family: Source Han Sans CN;
         font-weight: 300;
         color: #613c0c;
-        line-height: 15px;
-      }
-      img {
-        width: 100%;
+        padding-left: 30%;
       }
       .keepAlive {
-        width: 14vw;
-        position: absolute;
-        left: 70vw;
-        top: 5vh;
+        width: 40%;
+        height: 100px;
+        text-align: center;
+        margin: auto;
+        line-height: 100px;
+        img{
+          display: inline-block;
+          padding: 30px 0;
+        }
       }
     }
 
     .cardThree {
-      width: 40vw;
-      // display: flex;
-      margin: 0 auto;
 
       // justify-content: center;
-      position: relative;
       .first {
-        position: absolute;
-        left: 3vw;
-        top: 3vh;
-        width: 60px;
-        height: 14.5px;
-        font-size: 15px;
-        font-family: Source Han Sans CN;
-        font-weight: 500;
-        color: #613c0c;
-        line-height: 6px;
+
       }
       .second {
-        position: absolute;
-        left: 3vw;
-        top: 5vh;
-
-        width: 48px;
-        height: 24px;
-        font-size: 11px;
-        font-family: Source Han Sans CN;
-        font-weight: 300;
-        color: #613c0c;
-        line-height: 15px;
       }
     }
     .freshRice {
-      width: 14vw;
-      position: absolute;
-      top: 1vh;
-      left: 24vw;
+     img{
+       width: 100%;
+       display: inline-block;
+     }
     }
     .cardFour {
-      width: 45vw;
-      position: relative;
-      // position: absolute;
-
       display: flex;
-      justify-content: center;
-      align-items: center;
       .first {
-        position: absolute;
-        width: 78.5px;
-        height: 14px;
-        font-size: 15px;
-        font-family: Source Han Sans CN;
-        font-weight: 500;
-        color: #613c0c;
-        line-height: 3px;
-        left: 3vw;
-        top: 10vh;
       }
       .second {
-        // margin: -21vh 0 0 5vw;
-        position: absolute;
-        top: 9vh;
-        left: 4vw;
-        // margin: 1vh 0 0 6vw;
-        width: 48px;
-        height: 24px;
-        font-size: 0.5rem;
-        font-family: Source Han Sans CN;
-        font-weight: 300;
-        color: #613c0c;
-        line-height: 12px;
       }
       .normalGrow {
-        width: 14vw;
-        position: absolute;
-        left: 26vw;
-        top: 31vh;
         // margin: 4vh 0 0 12vh;
       }
     }
     .cardFive {
-      width: 40vw;
-      display: flex;
-      margin: 0 auto;
 
-      position: relative;
-      justify-content: center;
       .first {
-        position: absolute;
-        left: 2vw;
-        top: 16px;
-        width: 60px;
-        height: 14.5px;
-        font-size: 15px;
-        font-family: Source Han Sans CN;
-        font-weight: 500;
-        color: #613c0c;
-        line-height: 6px;
-      }
-      .second {
-        position: absolute;
-        left: 45vw;
-        top: 33vh;
-        margin: 0 0 0 5vw;
-        width: 48px;
-        height: 24px;
-        font-size: 11px;
-        font-family: Source Han Sans CN;
-        font-weight: 300;
-        color: #613c0c;
-        line-height: 12px;
-      }
-      img {
-        width: 100%;
-      }
-      .organic {
-        width: 14vw;
-        position: absolute;
-        left: 70vw;
-        top: 30vh;
-      }
-    }
-  }
 
-  @media screen and (max-width: 414px) {
-    .middle .card {
-      .first {
-        // margin-top: 27px;
-        font-size: 18px;
-        left: 4vw;
-        top: 7vh;
       }
       .second {
-        font-size: 11px;
-      }
-      .lastP {
-        left: 18px;
-      }
-    }
 
-    .middle .cardTwo {
-      .first {
-        left: 44vw;
-        top: 15vh;
-      }
-      .second {
-        left: 44vw;
-        top: 8vh;
-      }
-      .keepAlive {
-        width: 11.5vw;
-        left: 70vw;
-        top: 5vh;
-      }
-    }
-
-    //
-    .middle .freshRice {
-      top: 1vh;
-      left: 24vw;
-    }
-    .middle .cardThree {
-      .first {
-        left: 3vw;
-        top: 3vh;
-      }
-      .second {
-        left: 3vw;
-        top: 5vh;
-      }
-    }
-    .middle .cardFour {
-      .first {
-        left: 4vw;
-        top: 3vh;
-      }
-      .second {
-        left: 4vw;
-        top: 5vh;
-      }
-      .normalGrow {
-        left: 24vw;
-        top: 2vh;
-      }
-    }
-    .middle .cardFive {
-      .first {
-        left: 2vw;
-        top: 19px;
-      }
-      .second {
-        left: -2vw;
-        top: 34px;
       }
       .organic {
-        left: 22vw;
-        top: 13px;
       }
     }
-    .detail li .riceBox {
-      right: 128px;
-    }
   }
+
+  //@media screen and (max-width: 414px) {
+  //  .middle .card {
+  //    .first {
+  //      // margin-top: 27px;
+  //      font-size: 18px;
+  //      left: 4vw;
+  //      top: 7vh;
+  //    }
+  //    .second {
+  //      font-size: 11px;
+  //    }
+  //    .lastP {
+  //      left: 18px;
+  //    }
+  //  }
+  //
+  //  .middle .cardTwo {
+  //    .first {
+  //      left: 44vw;
+  //      top: 15vh;
+  //    }
+  //    .second {
+  //      left: 44vw;
+  //      top: 8vh;
+  //    }
+  //    .keepAlive {
+  //      width: 11.5vw;
+  //      left: 70vw;
+  //      top: 5vh;
+  //    }
+  //  }
+  //
+  //  //
+  //  .middle .freshRice {
+  //    top: 1vh;
+  //    left: 24vw;
+  //  }
+  //  .middle .cardThree {
+  //    .first {
+  //      left: 3vw;
+  //      top: 3vh;
+  //    }
+  //    .second {
+  //      left: 3vw;
+  //      top: 5vh;
+  //    }
+  //  }
+  //  .middle .cardFour {
+  //    .first {
+  //      left: 4vw;
+  //      top: 3vh;
+  //    }
+  //    .second {
+  //      left: 4vw;
+  //      top: 5vh;
+  //    }
+  //    .normalGrow {
+  //      left: 24vw;
+  //      top: 2vh;
+  //    }
+  //  }
+  //  .middle .cardFive {
+  //    .first {
+  //      left: 2vw;
+  //      top: 19px;
+  //    }
+  //    .second {
+  //      left: -2vw;
+  //      top: 34px;
+  //    }
+  //    .organic {
+  //      left: 22vw;
+  //      top: 13px;
+  //    }
+  //  }
+  //}
   @media screen and (max-width: 375px) {
     .middle .card {
       .first {
@@ -759,17 +599,14 @@ export default {
 
     .middle .cardTwo {
       .first {
-        left: 44vw;
-        top: 16vh;
+        font-size: .8em;
       }
       .second {
         left: 44vw;
         top: 9vh;
       }
       .keepAlive {
-        width: 12vw;
-        left: 70vw;
-        top: 5vh;
+        width:40px
       }
     }
     //
@@ -815,285 +652,276 @@ export default {
         top: 13px;
       }
     }
-    .detail li .riceBox {
-      right: 112px;
-    }
-  }
-  @media screen and (max-width: 360px) {
-    .detail li .riceBox {
-      right: 105px;
-    }
-    .middle .card {
-      .first {
-        // margin-top: 27px;
-        font-size: 15px;
-        left: 14px;
-        top: 47px;
-      }
-      .second {
-        left: 14px;
-        top: 62px;
-      }
-      .lastP {
-        top: 17vh;
-        left: 5vw;
-        span {
-          font-size: 0.6rem;
-        }
-      }
-    }
-    .middle .cardTwo {
-      .first {
-        left: 157px;
-        top: 99px;
-      }
-      .second {
-        left: 157px;
-        top: 55px;
-      }
-      .keepAlive {
-        width: 13vw;
-        left: 243px;
-        top: 32px;
-      }
-    }
-    .middle .cardThree {
-      .first {
-        left: 3vw;
-        top: 3vh;
-      }
-      .second {
-        left: 3vw;
-        top: 5vh;
-      }
-    }
-    .middle .freshRice {
-      top: 1vh;
-      left: 23vw;
-    }
-    .middle .cardFour {
-      .first {
-        left: 4vw;
-        top: 3vh;
-      }
-      .second {
-        left: 4vw;
-        top: 5vh;
-      }
-      .normalGrow {
-        left: 24vw;
-        top: 2vh;
-      }
-    }
-    .middle .cardFive {
-      .first {
-        left: 2vw;
-        top: 16px;
-      }
-      .second {
-        left: -2vw;
-        top: 30px;
-      }
-      .organic {
-        left: 22vw;
-        top: 13px;
-      }
-    }
-  }
-  @media screen and (max-width: 320px) {
-    .productPack .box {
-      p {
-        margin: 7.5px 0 7px 4px;
-      }
-      span {
-        margin: 12.5px 0 0px 8px;
-      }
-    }
-    .middle .card {
-      .first {
-        font-size: 0.9rem;
-        left: 12px;
-        top: 9vh;
-      }
-      .second {
-        top: 64px;
-        left: 7px;
-        font-size: 0.7rem;
-        transform: scale(0.8);
-      }
-      .lastP {
-        top: 18vh;
-        left: 4vw;
-        span {
-          font-size: 0.6rem;
-        }
-      }
-    }
-
-    .middle .camera {
-      left: 22vw;
-      top: 8vh;
-    }
-
-    .middle .cardTwo {
-      .first {
-        left: 138px;
-        top: 90px;
-        font-size: 14px;
-      }
-      .second {
-        transform: scale(0.8);
-
-        left: 134px;
-        top: 51px;
-        font-size: 0.7rem;
-      }
-      .keepAlive {
-        width: 13vw;
-        left: 223px;
-        top: 32px;
-      }
-    }
-
-    .middle .keepAlive {
-      width: 11.5vw;
-      left: 70vw;
-      top: 6vh;
-    }
-    .middle .cardFour {
-      .first {
-        left: 4vw;
-        top: 3vh;
-      }
-      .second {
-        transform: scale(0.8);
-        left: 3vw;
-        top: 5vh;
-      }
-      .normalGrow {
-        left: 26vw;
-        top: 2vh;
-      }
-    }
-
-    //
-    .middle .freshRice {
-      top: 1vh;
-      left: 24vw;
-    }
-    .middle .cardThree {
-      .first {
-        font-size: 14px;
-        left: 3vw;
-        top: 3vh;
-      }
-      .second {
-        left: 2vw;
-        top: 5vh;
-        transform: scale(0.8);
-      }
-    }
-
-    .middle .cardFive {
-      .first {
-        left: 2vw;
-        top: 17px;
-      }
-      .second {
-        transform: scale(0.8);
-
-        left: -3vw;
-        top: 30px;
-      }
-      .organic {
-        left: 25vw;
-        top: 13px;
-      }
-    }
-
-    .detail li .riceBox {
-      right: 28vw;
-    }
-  }
-
-  @media screen and (min-height: 812px) {
-    .middle .card .first {
-      // margin-top: 27px;
-      font-size: 16px;
-
-      left: 4vw;
-      top: 7vh;
-    }
-    .middle .card .second {
-      top: 9vh;
-      left: 4vw;
-    }
-    .middle .camera {
-      left: 22vw;
-      top: 6vh;
-    }
-    .middle .card .lastP {
-      top: 13vh;
-      left: 5vw;
-      span {
-        font-size: 12px;
-      }
-    }
-    .middle .cardTwo .first {
-      left: 44vw;
-      top: 14vh;
-    }
-    .middle .cardTwo .keepAlive {
-      width: 11.5vw;
-      left: 70vw;
-      top: 4vh;
-    }
-    .middle .cardTwo .second {
-      left: 44vw;
-      top: 7vh;
-    }
-    //
-    .middle .freshRice {
-      top: 2vh;
-      left: 25vw;
-    }
-    .middle .cardThree .first {
-      left: 3vw;
-      top: 2vh;
-    }
-    .middle .cardThree .second {
-      left: 3vw;
-      top: 4vh;
-    }
-    .middle .cardFour {
-      .first {
-        left: 4vw;
-        top: 3vh;
-      }
-      .second {
-        left: 4vw;
-        top: 5vh;
-      }
-      .normalGrow {
-        left: 24vw;
-        top: 2vh;
-      }
-    }
-
-    .middle .cardFive {
-      .first {
-        left: 2vw;
-        top: 19px;
-      }
-      .second {
-        left: -2vw;
-        top: 34px;
-      }
-      .organic {
-        left: 24vw;
-        top: 21px;
-      }
-    }
   }
+  //@media screen and (max-width: 360px) {
+  //  .middle .card {
+  //    .first {
+  //      // margin-top: 27px;
+  //      font-size: 15px;
+  //      left: 14px;
+  //      top: 47px;
+  //    }
+  //    .second {
+  //      left: 14px;
+  //      top: 62px;
+  //    }
+  //    .lastP {
+  //      top: 17vh;
+  //      left: 5vw;
+  //      span {
+  //        font-size: 0.6rem;
+  //      }
+  //    }
+  //  }
+  //  .middle .cardTwo {
+  //    .first {
+  //      left: 157px;
+  //      top: 99px;
+  //    }
+  //    .second {
+  //      left: 157px;
+  //      top: 55px;
+  //    }
+  //    .keepAlive {
+  //      width: 13vw;
+  //      left: 243px;
+  //      top: 32px;
+  //    }
+  //  }
+  //  .middle .cardThree {
+  //    .first {
+  //      left: 3vw;
+  //      top: 3vh;
+  //    }
+  //    .second {
+  //      left: 3vw;
+  //      top: 5vh;
+  //    }
+  //  }
+  //  .middle .freshRice {
+  //    top: 1vh;
+  //    left: 23vw;
+  //  }
+  //  .middle .cardFour {
+  //    .first {
+  //      left: 4vw;
+  //      top: 3vh;
+  //    }
+  //    .second {
+  //      left: 4vw;
+  //      top: 5vh;
+  //    }
+  //    .normalGrow {
+  //      left: 24vw;
+  //      top: 2vh;
+  //    }
+  //  }
+  //  .middle .cardFive {
+  //    .first {
+  //      left: 2vw;
+  //      top: 16px;
+  //    }
+  //    .second {
+  //      left: -2vw;
+  //      top: 30px;
+  //    }
+  //    .organic {
+  //      left: 22vw;
+  //      top: 13px;
+  //    }
+  //  }
+  //}
+  //@media screen and (max-width: 320px) {
+  //  .productPack .box {
+  //    p {
+  //      margin: 7.5px 0 7px 4px;
+  //    }
+  //    span {
+  //      margin: 12.5px 0 0px 8px;
+  //    }
+  //  }
+  //  .middle .card {
+  //    .first {
+  //      font-size: 0.9rem;
+  //      left: 12px;
+  //      top: 9vh;
+  //    }
+  //    .second {
+  //      top: 64px;
+  //      left: 7px;
+  //      font-size: 0.7rem;
+  //      transform: scale(0.8);
+  //    }
+  //    .lastP {
+  //      top: 18vh;
+  //      left: 4vw;
+  //      span {
+  //        font-size: 0.6rem;
+  //      }
+  //    }
+  //  }
+  //
+  //  .middle .camera {
+  //    left: 22vw;
+  //    top: 8vh;
+  //  }
+  //
+  //  .middle .cardTwo {
+  //    .first {
+  //      left: 138px;
+  //      top: 90px;
+  //      font-size: 14px;
+  //    }
+  //    .second {
+  //      transform: scale(0.8);
+  //
+  //      left: 134px;
+  //      top: 51px;
+  //      font-size: 0.7rem;
+  //    }
+  //    .keepAlive {
+  //      width: 13vw;
+  //      left: 223px;
+  //      top: 32px;
+  //    }
+  //  }
+  //
+  //  .middle .keepAlive {
+  //    width: 11.5vw;
+  //    left: 70vw;
+  //    top: 6vh;
+  //  }
+  //  .middle .cardFour {
+  //    .first {
+  //      left: 4vw;
+  //      top: 3vh;
+  //    }
+  //    .second {
+  //      transform: scale(0.8);
+  //      left: 3vw;
+  //      top: 5vh;
+  //    }
+  //    .normalGrow {
+  //      left: 26vw;
+  //      top: 2vh;
+  //    }
+  //  }
+  //
+  //  //
+  //  .middle .freshRice {
+  //    top: 1vh;
+  //    left: 24vw;
+  //  }
+  //  .middle .cardThree {
+  //    .first {
+  //      font-size: 14px;
+  //      left: 3vw;
+  //      top: 3vh;
+  //    }
+  //    .second {
+  //      left: 2vw;
+  //      top: 5vh;
+  //      transform: scale(0.8);
+  //    }
+  //  }
+  //
+  //  .middle .cardFive {
+  //    .first {
+  //      left: 2vw;
+  //      top: 17px;
+  //    }
+  //    .second {
+  //      transform: scale(0.8);
+  //
+  //      left: -3vw;
+  //      top: 30px;
+  //    }
+  //    .organic {
+  //      left: 25vw;
+  //      top: 13px;
+  //    }
+  //  }
+  //
+  //}
+  //
+  //@media screen and (min-height: 812px) {
+  //  .middle .card .first {
+  //    // margin-top: 27px;
+  //    font-size: 16px;
+  //
+  //    left: 4vw;
+  //    top: 7vh;
+  //  }
+  //  .middle .card .second {
+  //    top: 9vh;
+  //    left: 4vw;
+  //  }
+  //  .middle .camera {
+  //    left: 22vw;
+  //    top: 6vh;
+  //  }
+  //  .middle .card .lastP {
+  //    top: 13vh;
+  //    left: 5vw;
+  //    span {
+  //      font-size: 12px;
+  //    }
+  //  }
+  //  .middle .cardTwo .first {
+  //    left: 44vw;
+  //    top: 14vh;
+  //  }
+  //  .middle .cardTwo .keepAlive {
+  //    width: 11.5vw;
+  //    left: 70vw;
+  //    top: 4vh;
+  //  }
+  //  .middle .cardTwo .second {
+  //    left: 44vw;
+  //    top: 7vh;
+  //  }
+  //  //
+  //  .middle .freshRice {
+  //    top: 2vh;
+  //    left: 25vw;
+  //  }
+  //  .middle .cardThree .first {
+  //    left: 3vw;
+  //    top: 2vh;
+  //  }
+  //  .middle .cardThree .second {
+  //    left: 3vw;
+  //    top: 4vh;
+  //  }
+  //  .middle .cardFour {
+  //    .first {
+  //      left: 4vw;
+  //      top: 3vh;
+  //    }
+  //    .second {
+  //      left: 4vw;
+  //      top: 5vh;
+  //    }
+  //    .normalGrow {
+  //      left: 24vw;
+  //      top: 2vh;
+  //    }
+  //  }
+  //
+  //  .middle .cardFive {
+  //    .first {
+  //      left: 2vw;
+  //      top: 19px;
+  //    }
+  //    .second {
+  //      left: -2vw;
+  //      top: 34px;
+  //    }
+  //    .organic {
+  //      left: 24vw;
+  //      top: 21px;
+  //    }
+  //  }
+  //}
 }
 </style>

src/views/product/index.vue

@@ -1,49 +1,30 @@
 <template>
-  <div class="product" style="padding-top: 46px">
+  <div class="product">
     <!-- <van-nav-bar title="产品" class="van-nav-bar-my-fixed" fixed /> -->
     <div class="bgImg">
-      <img src="@/assets/images/product/bgImg.png" alt="" />
+<!--      <img src="@/assets/images/product/bgImg.png" alt="" />-->
       <div class="title">
-        <p>藏金·1745产品</p>
+        <p>藏金 · 1745产品</p>
       </div>
       <div class="tags">
         <img src="@/assets/images/product/tags.png" alt="" />
       </div>
     </div>
-    <div v-loading="loading" class="clear">
+
+    <div v-loading="loading">
       <div class="product-baozhuang">
         <div class="productPack">
           <div class="packageBox">
             <li @click="handleClick(0)">
               <!-- <img :src="currIndex == '0' ? selectActive : select" alt="" /> -->
-              <img
-                src="@/assets/images/product/select.png"
-                alt=""
-                v-if="currIndex != '0'"
-              />
-              <img
-                src="@/assets/images/product/select-active.png"
-                alt=""
-                v-if="currIndex == '0'"
-              />
-              <div class="box">
+              <div class="box" :class="{'selected':currIndex==0}">
                 <img src="@/assets/images/product/box.png" alt="" />
                 <p>藏金·1745-实惠装</p>
                 <span>可用库存:{{ canStockBag }}</span>
               </div>
             </li>
-            <li @click="handleClick(1)" style="float: right">
-              <img
-                src="@/assets/images/product/select.png"
-                alt=""
-                v-if="currIndex != '1'"
-              />
-              <img
-                src="@/assets/images/product/select-active.png"
-                alt=""
-                v-if="currIndex == '1'"
-              />
-              <div class="bag">
+            <li @click="handleClick(1)">
+              <div class="box" :class="{'selected':currIndex==1}">
                 <img src="@/assets/images/product/bag.png" alt="" />
                 <p>藏金·1745-礼盒装</p>
                 <span>可用库存:{{ canStockBox }}</span>
@@ -53,12 +34,10 @@
 
           <div v-if="ad && ad.id" @click="getaddress" class="item-ad clear">
             <p class="item-ad__name">
-              <span>{{ ad.name }}</span
-              ><span class="fr tel">{{ ad.mobile }}</span>
+              <span>{{ ad.name }} </span><span class="tel">{{ ad.mobile }}</span>
             </p>
-
             <p class="item-ad__address">
-              <span>{{ ad.address }}</span>
+              <van-icon name="location-o" size="14"/> <span>{{ ad.address }}</span>
             </p>
           </div>
           <div class="kongParents" v-else>
@@ -72,13 +51,13 @@
           <div class="fl">
             <input-number :numb="num" :max="stock" @backNum="backNum" />
           </div>
-          <van-button
-            type="info"
-            class="fr"
-            style="width: 30%"
-            @click="placeOrder"
-            >确认下单</van-button
-          >
+          <div>
+            <van-button
+                type="info"
+                class="fr"
+                @click="placeOrder"
+            >确认下单</van-button>
+          </div>
         </div>
       </div>
 
@@ -131,6 +110,7 @@ export default {
       ad: null,
       canStockBox: "",
       canStockBag: "",
+      isce:''
     };
   },
   mounted() {
@@ -312,131 +292,94 @@ export default {
 
 <style lang="scss" scoped>
 .product {
-  // padding-left: 16px !important;
-  // padding-right: 16px !important;
-  position: relative;
-  top: 0;
-  left: 0;
+  background: #FCFCF0!important;
   .bgImg {
     width: 100%;
-    height: 296.5px;
-    overflow: hidden;
-    margin: -46px 0 0 0;
+    height: 50%;
+    background: url("../../assets/images/product/bgImg.png") no-repeat center;
+    background-size:100% 100%;
+    position: relative;
     img {
       width: 100%;
     }
     .title {
-      position: absolute;
-      top: 164px;
-      left: 20px;
-      width: 110px;
-      height: 15.5px;
-      font-size: 16px;
+      width: 50%;
+      height: 100%;
+      display: inline-block;
+      font-size: 1.4em;
       font-family: Source Han Sans CN;
       font-weight: 500;
       color: #daac70;
-      line-height: 13px;
+      position: relative;
+      p{
+        position: absolute;
+        top:50%;
+        left:5%;
+      }
     }
     .tags {
-      width: 47px;
-      height: 94px;
-      position: absolute;
-      right: 7vw;
-      top: 07vh;
+      width: 50%;
+      height:100%;
+      display: inline-block;
+      position: relative;
       img {
-        width: 100%;
+        position: absolute;
+        width: 50px;
+        right: 10%;
+        top: 10%;
       }
     }
   }
+
   .product-baozhuang {
-    width: 100vw;
-    // margin: -10vh 0 0 0;
+    width:100%;
+    position: absolute;
+     top:40%;
+     left:0;
   }
   .productPack {
-    width: calc(100vw - 30px);
-    height: 50vh;
-    z-index: 99999;
+    width: 90%;
+    z-index: 100;
     margin: 0 auto;
     position: relative;
-    top: -1vh;
+    margin-bottom: 100px;
+  .packageBox{
+    display: flex;
+    justify-content: space-between;
+  }
 
     li {
-      float: left;
       list-style: none;
-      width: 43vw;
-
-      img {
-        // width: 100%;
-        width: 43vw;
-      }
-      .box {
-        width: 40vw;
+      width:calc(50% - 10px);
+      display: inline-block;
+      padding: 5px;
+      .box{
+        background: #E6E6DC;
+        border-radius: 13px;
+        padding: 5px;
+        img {
+          width: 100%;
+        }
+        p {
+          margin: 10px 0 5px 10px;
+          font-size:1.2em;
+          font-family: Source Han Sans CN;
+          font-weight: 600;
+          color: #1A1A1A;
+        }
+        span {
+          margin-left: 10px;
+          font-size: 1em;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #4D4D4D;
+        }
       }
-      .bag {
-        width: 40vw;
+      .selected{
+        background: linear-gradient(0deg, #A57D4B, #EFC180, #EFC180);
       }
     }
-    li:last-child {
-      margin-left: 10px;
-    }
-
-    .box {
-      position: absolute;
-      top: 2vw;
-      left: 1.5vw;
 
-      img {
-        width: 39vw;
-      }
-      p {
-        margin: 12.5px 0 7px 10px;
-        width: 122.5px;
-        height: 13.5px;
-        font-size: 14px;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        color: #111111;
-        line-height: 13px;
-      }
-      span {
-        margin: 12.5px 0 0px 10px;
-        width: 47px;
-        height: 10.5px;
-        font-size: 11px;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        color: #666666;
-        line-height: 3px;
-      }
-    }
-    .bag {
-      position: absolute;
-      top: 2vw;
-      right: 1vw;
-      img {
-        width: 39vw;
-      }
-      p {
-        margin: 12.5px 0 7px 10px;
-        width: 122.5px;
-        height: 13.5px;
-        font-size: 14px;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        color: #111111;
-        line-height: 13px;
-      }
-      span {
-        margin: 12.5px 0 0px 10px;
-        width: 47px;
-        height: 10.5px;
-        font-size: 11px;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        color: #666666;
-        line-height: 3px;
-      }
-    }
   }
   .product-kucun {
     width: 100%;
@@ -526,41 +469,37 @@ export default {
     }
   }
   .item-ad {
-    top: 205px;
-    position: absolute;
     background-color: #e6e6dc;
-    // color: #daad70;
     color: #999999;
-    font-size: 13px;
-    line-height: 18px;
     padding: 10px 16px;
-    border-radius: 12px;
     box-sizing: border-box;
     width: 100%;
-    height: 80px;
+    margin-top: 30px;
     opacity: 1;
     border-radius: 8px;
     .item-ad__name {
-      width: 150px;
-      height: 14px;
-      font-size: 15px;
+      font-size: 1.2em;
       font-family: Source Han Sans CN;
-      font-weight: 400;
+      font-weight: 600;
       color: #111111;
-      line-height: 13px;
-      margin: 10px 0;
+      margin: 5px 0;
     }
 
     .item-ad__address {
       text-align: justify;
+      font-size: 1.2em;
+      font-family: Source Han Sans CN;
+      color:#999999;
+      margin: 5px 0;
+      span{
+       margin-left: 5px;
+      }
     }
   }
   .kongParents {
     width: calc(100vw - 30px);
-    position: absolute;
-    left: 0;
-    bottom: 0;
     // top: 199.5px;
+    margin-top: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -574,7 +513,6 @@ export default {
     text-align: center;
     width: 180px;
     border-radius: 17px;
-
     background: linear-gradient(0deg, #f2c482, #a07947);
     img {
       width: 13px;
@@ -593,69 +531,81 @@ export default {
     }
   }
   .product-footer {
-    position: absolute;
-    width: 375px;
-    height: 44px;
-    background: #e6e6dc;
+    position: fixed;
+    width: 100%;
+    background: #E6E6DC;
     left: 0;
     bottom: 50px;
     z-index: 3;
-    width: 100%;
-    height: 44px;
     .fl {
-      padding: 5px 0 0 16px;
+
+        font-size: 1.4em;
+        padding: 10px;
+        font-family: DIN;
+        font-weight: 500;
+        color: #111111;
+
     }
     button {
-      background: linear-gradient(0deg, #9e7746, #f4c583);
-      color: #333;
-      border: 1px solid #9e7746;
-      border-radius: 10px;
-      overflow: hidden;
-      margin: 0 16px 0 0;
+      background: #E6E6DC;
+      color:#292929;
+      padding: 0;
+      border: 0px;
+      line-height: 56px;
+      height: 56px;
+      width: 40vw;
+      border-left: 2px solid #FCFCF0;
+      //background: linear-gradient(0deg, #9e7746, #f4c583);
+      //color: #333;
+      //border: 1px solid #9e7746;
+      //border-radius: 10px;
+      //overflow: hidden;
+      //margin: 0 16px 0 0;
+      //list-style: none;
     }
   }
 
-  @media screen and (max-width: 320px) {
-    .item-ad {
-      width: 90vw;
-      top: 160px;
-      font-size: 12px;
-      height: 70px;
-      p {
-        margin: 0;
-      }
-    }
-    .kongParents {
-      top: 174px;
-    }
-    // .product-baozhuang {
-    //   margin: -15vh 0 0 0;
-    // }
-    .productPack {
-      .box {
-        p {
-          margin: 8.5px 0 7px 6px;
-        }
-        span {
-          margin: 12.5px 0 0px 6px;
-        }
-      }
-      .bag {
-        p {
-          margin: 8.5px 0 7px 10px;
-        }
-      }
-    }
-  }
-  @media screen and (max-width: 375px) and (max-width: 414px) {
-    .product-baozhuang {
-      margin: -80px 0 0 0;
-    }
-  }
-  @media screen and (min-width: 414px) {
-    .product-baozhuang {
-      margin: -80px 0 0 0;
-    }
-  }
+  //@media screen and (max-width: 320px) {
+  //  .item-ad {
+  //    width: 90vw;
+  //    top: 160px;
+  //    font-size: 12px;
+  //    height: 70px;
+  //    p {
+  //      margin: 0;
+  //    }
+  //  }
+  //  .kongParents {
+  //    top: 174px;
+  //  }
+  //  // .product-baozhuang {
+  //  //   margin: -15vh 0 0 0;
+  //  // }
+  //  .productPack {
+  //    .box {
+  //      p {
+  //        margin: 8.5px 0 7px 6px;
+  //      }
+  //      span {
+  //        margin: 12.5px 0 0px 6px;
+  //      }
+  //    }
+  //    .bag {
+  //      p {
+  //        margin: 8.5px 0 7px 10px;
+  //      }
+  //    }
+  //  }
+  //}
+  //@media screen and (max-width: 375px) and (max-width: 414px) {
+  //  .product-baozhuang {
+  //    margin: -80px 0 0 0;
+  //  }
+  //}
+  //@media screen and (min-width: 414px) {
+  //  .product-baozhuang {
+  //    margin: -80px 0 0 0;
+  //  }
+  //}
 }
 </style>