优化首页 ui
This commit is contained in:
pushuo
parent
790cff21a4
commit
5aa46f026b
|
|
@ -50,3 +50,8 @@ PUSHER_APP_CLUSTER=mt1
|
|||
|
||||
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
|
||||
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
|
||||
|
||||
|
||||
# 前端热更新, PROXY: vhost or path, HOST: 多设备实时
|
||||
MIX_PROXY=beikeshop.test
|
||||
MIX_HOST=192.168.0.122
|
||||
40
package.json
40
package.json
|
|
@ -1,21 +1,23 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "npm run development",
|
||||
"development": "mix",
|
||||
"watch": "mix watch",
|
||||
"watch-poll": "mix watch -- --watch-options-poll=1000",
|
||||
"hot": "mix watch --hot",
|
||||
"prod": "npm run production",
|
||||
"production": "mix --production"
|
||||
},
|
||||
"devDependencies": {
|
||||
"axios": "^0.21",
|
||||
"bootstrap": "^4.6.1",
|
||||
"laravel-mix": "^6.0.6",
|
||||
"lodash": "^4.17.19",
|
||||
"resolve-url-loader": "^4.0.0",
|
||||
"sass": "^1.38.1",
|
||||
"sass-loader": "^12.1.0"
|
||||
}
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "npm run development",
|
||||
"development": "mix",
|
||||
"watch": "mix watch",
|
||||
"watch-poll": "mix watch -- --watch-options-poll=1000",
|
||||
"hot": "mix watch --hot",
|
||||
"prod": "npm run production",
|
||||
"production": "mix --production"
|
||||
},
|
||||
"devDependencies": {
|
||||
"axios": "^0.21",
|
||||
"bootstrap": "^4.6.1",
|
||||
"browser-sync": "^2.27.10",
|
||||
"browser-sync-webpack-plugin": "^2.3.0",
|
||||
"laravel-mix": "^6.0.6",
|
||||
"lodash": "^4.17.19",
|
||||
"resolve-url-loader": "^4.0.0",
|
||||
"sass": "^1.38.1",
|
||||
"sass-loader": "^12.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
@charset "UTF-8";
|
||||
header .top-wrap {
|
||||
height: 44px;
|
||||
background: #F7F8FA;
|
||||
display: flex;
|
||||
}
|
||||
header .header-content .container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
header .header-content .menu-wrap .navbar-nav li:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
header .header-content .menu-wrap .nav-link {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
header .header-content .logo img {
|
||||
max-width: 180px;
|
||||
max-height: 30px;
|
||||
}
|
||||
header .header-content .right-btn .nav-link {
|
||||
color: #333;
|
||||
}
|
||||
header .header-content .right-btn .nav-link i {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "iconfont";
|
||||
src: url("/vendor/iconfont/iconfont.woff") format("woff"), url("/vendor/iconfont/iconfont.ttf") format("truetype");
|
||||
/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
||||
}
|
||||
.iconfont {
|
||||
font-family: "iconfont";
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0.2px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 410 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 357 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 498 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,58 @@
|
|||
{
|
||||
"id": "3478615",
|
||||
"name": "beikeshop",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "14992",
|
||||
"name": "购物袋",
|
||||
"font_class": "gouwudai",
|
||||
"unicode": "e60a",
|
||||
"unicode_decimal": 58890
|
||||
},
|
||||
{
|
||||
"icon_id": "887903",
|
||||
"name": "个人中心",
|
||||
"font_class": "gerenzhongxin",
|
||||
"unicode": "e619",
|
||||
"unicode_decimal": 58905
|
||||
},
|
||||
{
|
||||
"icon_id": "918721",
|
||||
"name": "空爱心",
|
||||
"font_class": "kongaixin",
|
||||
"unicode": "e662",
|
||||
"unicode_decimal": 58978
|
||||
},
|
||||
{
|
||||
"icon_id": "1110402",
|
||||
"name": "爱心_线",
|
||||
"font_class": "aixinxian",
|
||||
"unicode": "e602",
|
||||
"unicode_decimal": 58882
|
||||
},
|
||||
{
|
||||
"icon_id": "1901648",
|
||||
"name": "购物袋",
|
||||
"font_class": "gouwudai1",
|
||||
"unicode": "e600",
|
||||
"unicode_decimal": 58880
|
||||
},
|
||||
{
|
||||
"icon_id": "2076426",
|
||||
"name": "搜索小",
|
||||
"font_class": "sousuoxiao",
|
||||
"unicode": "e8d6",
|
||||
"unicode_decimal": 59606
|
||||
},
|
||||
{
|
||||
"icon_id": "3232533",
|
||||
"name": "001购物袋",
|
||||
"font_class": "gouwudai2",
|
||||
"unicode": "e634",
|
||||
"unicode_decimal": 58932
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,4 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import './header';
|
||||
@import './iconfont';
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
//
|
||||
// @copyright 2020 opencart.cn - All Rights Reserved
|
||||
// @link http://www.guangdawangluo.com
|
||||
// @author Sam Chen <sam.chen@opencart.cn>
|
||||
// @created 2021-08-24 14:38:09
|
||||
// @modified 2021-08-24 15:07:05
|
||||
//
|
||||
|
||||
$primary: #fd560f;
|
||||
$font-size-base: 0.8rem;
|
||||
|
||||
@import 'node_modules/bootstrap/scss/bootstrap';
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
header {
|
||||
.top-wrap {
|
||||
// padding: 10px;
|
||||
height: 44px;
|
||||
// max-height: 50px;
|
||||
background: #F7F8FA;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu-wrap {
|
||||
.navbar-nav {
|
||||
li {
|
||||
&:hover {
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
img {
|
||||
max-width: 180px;
|
||||
max-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-btn {
|
||||
.nav-link {
|
||||
color: #333;
|
||||
i {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@font-face {font-family: 'iconfont';
|
||||
src: url('/vendor/iconfont/iconfont.woff') format('woff'), /* chrome、firefox */
|
||||
url('/vendor/iconfont/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont";
|
||||
font-size: 1rem;
|
||||
font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0.2px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
.module-image-plus {
|
||||
|
||||
}
|
||||
|
|
@ -1,10 +1,18 @@
|
|||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<h1>Acme theme - Home</h1>
|
||||
<div class="banner-wrap"><img src="{{ asset('image/default/banner.png') }}" class="img-fluid"></div>
|
||||
|
||||
<h2>Categories</h2>
|
||||
@foreach ($categories as $category)
|
||||
<a href="{{ shop_route('categories.show', $category) }}">{{ $category->description->name }}</a>
|
||||
@endforeach
|
||||
<div class="module-image-plus">
|
||||
<div class="container">
|
||||
<div class="col-6"><img src="{{ asset('image/default/image_plus_1.png') }}" class="img-fluid"></div>
|
||||
<div class="col-6">
|
||||
<div class="module-image-plus-top">
|
||||
<a href=""><img src="{{ asset('image/default/image_plus_2.png') }}" class="img-fluid"></a>
|
||||
<a href=""><img src="{{ asset('image/default/image_plus_3.png') }}" class="img-fluid"></a>
|
||||
</div>
|
||||
<div class="module-image-plus-bottom"><a href=""><img src="{{ asset('image/default/image_plus_4.png') }}" class="img-fluid"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -1,5 +1,71 @@
|
|||
<header>
|
||||
<div class="top">
|
||||
<div class=""></div>
|
||||
<div class="top-wrap">
|
||||
<div class="container d-flex justify-content-between align-items-center">
|
||||
<div class="left d-flex align-items-center">
|
||||
<div class="dropdown">
|
||||
<a class="btn dropdown-toggle" href="#" role="button" id="currency-dropdown" data-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
$ USD
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu" aria-labelledby="currency-dropdown">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<a class="btn dropdown-toggle" href="#" role="button" id="language-dropdown" data-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
Language
|
||||
</a>
|
||||
|
||||
<div class="dropdown-menu" aria-labelledby="language-dropdown">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a href="">Delivery</a>
|
||||
<a href="">Help</a>
|
||||
<span>028-0000000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="header-content py-3">
|
||||
<div class="container navbar-expand-lg">
|
||||
<div class="logo"><a href="http://"><img src="{{ asset('image/logo.png') }}" class="img-fluid"></a></div>
|
||||
<div class="menu-wrap">
|
||||
<ul class="navbar-nav mx-auto">
|
||||
<li class="dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Home</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="" class="dropdown-item">sssss</a></li>
|
||||
<li><a href="" class="dropdown-item">sssss</a></li>
|
||||
<li><a href="" class="dropdown-item">sssss</a></li>
|
||||
<li><a href="" class="dropdown-item">sssss</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="nav-link" href="#">夏季新品</a></li>
|
||||
<li><a class="nav-link" href="#">今日上心</a></li>
|
||||
<li><a class="nav-link" href="#">今日上心</a></li>
|
||||
<li><a class="nav-link" href="#">今日上心</a></li>
|
||||
</ul>
|
||||
|
||||
@foreach ($categories as $category)
|
||||
<a href="{{ shop_route('categories.show', $category) }}">{{ $category->description->name }}</a>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="right-btn">
|
||||
<ul class="navbar-nav flex-row">
|
||||
<li class="nav-item"><a href="" class="nav-link"><i class="iconfont"></i></a></li>
|
||||
<li class="nav-item"><a href="" class="nav-link"><i class="iconfont"></i></a></li>
|
||||
<li class="nav-item"><a href="" class="nav-link"><i class="iconfont"></i></a></li>
|
||||
<li class="nav-item"><a href="" class="nav-link"><i class="iconfont"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,11 @@
|
|||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>首页</title>
|
||||
<link rel="stylesheet" type="text/css" href="{{ asset('build/css/app.css') }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ asset('/build/beike/shop/default/css/bootstrap.css') }}">
|
||||
<script src="{{ asset('vendor/jquery/jquery-3.6.0.min.js') }}"></script>
|
||||
<script src="{{ asset('vendor/bootstrap-4.6.1/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('vendor/bootstrap-4.6.1/js/bootstrap.min.js') }}"></script>
|
||||
<link rel="stylesheet" type="text/css" href="{{ asset('/build/beike/shop/default/css/app.css') }}">
|
||||
@stack('header')
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -17,10 +17,30 @@ const mix = require('laravel-mix');
|
|||
// ]);
|
||||
|
||||
// mix.sass('resources/css/app.scss', 'public/build/css');
|
||||
mix.sass('resources//beike/css/bootstrap/bootstrap.scss', 'public/build/beike/css/bootstrap.css');
|
||||
mix.sass('resources/beike/css/bootstrap/bootstrap.scss', 'public/build/beike/css/bootstrap.css');
|
||||
|
||||
mix.sass('resources/beike/admin/css/app.scss', 'public/build/beike/css/admin.css');
|
||||
|
||||
// 前端 default 模版
|
||||
mix.sass('resources/beike/shop/default/bootstrap/bootstrap.scss', 'public/build/beike/shop/default/css/bootstrap.css');
|
||||
mix.sass('resources/beike/shop/default/app.scss', 'public/build/beike/shop/default/css/app.css');
|
||||
|
||||
if (mix.inProduction()) {
|
||||
mix.version();
|
||||
}
|
||||
|
||||
mix.browserSync({
|
||||
proxy: 'laravel.test'
|
||||
});
|
||||
|
||||
// 前端热更新
|
||||
if ( typeof process.env.MIX_PROXY != "undefined" || process.env.MIX_PROXY != '' ) {
|
||||
mix.browserSync({
|
||||
proxy: process.env.MIX_PROXY, // apache或iis等代理地址
|
||||
port: 1001,
|
||||
notify: false, // 刷新是否提示
|
||||
watchTask: true,
|
||||
open: false,
|
||||
host: process.env.MIX_HOST, // 本机ip, 这样其他设备才可实时看到更新
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue