ホームページ > 記事 > ウェブフロントエンド > Vue を使用して MacBook のようなページ デザインを実装するにはどうすればよいですか?
Vue を使用して MacBook のようなページ デザインを実装するにはどうすればよいですか?
- PHPzオリジナル
- 2023-06-25 09:11:131258ブラウズ
近年、Vue としても知られる Vue.js は、最も人気のあるフロントエンド フレームワークの 1 つとなり、そのシンプルさ、使いやすさ、強力なビュー制御機能が高く評価されています。同時に、Mac デバイスの人気に伴い、多くの Web サイト デザイナーが Mac デバイスのページ デザイン効果を模倣したいと考えています。この記事では、Vueを使ってMacBook風のページデザインを実現する方法を紹介します。
ステップ 1: 基本的なビュー構造とスタイルを構築する
MacBook のようなページ デザインを実現するには、最初に基本的なビュー構造とスタイルを構築する必要があります。 Vue CLI 3 ツールを使用すると、Vue ベースのプロジェクトをすばやく作成できます。 Vue CLI 3 では、コマンド ラインを使用してプロジェクト構造を作成し、開発サーバーを実行できます。プロジェクトの作成プロセスは次のとおりです:
- まず、npm を使用して Vue CLI 3 をインストールします:
$npm install -g @vue/cli
- 次に、新しい Vue プロジェクトを作成します:
$vue create my-mac-app
- 希望のプロジェクト構成オプションを選択し、プロジェクトの作成が完了するまで待ちます。
- 開発サーバーを起動します:
$cd my-mac-app $npm run serve
プロジェクトが作成されたら、次のコードを /src/App.vue ファイルに追加できます:
<template>
<div class="macbook">
<div class="screen">
<!--在此处添加页面内容-->
</div>
<div class="keyboard">
<!--在此处添加键盘-->
</div>
<div class="trackpad"></div>
</div>
</template>
<style>
.macbook {
width: 600px;
height: 400px;
position: relative;
background-color: #d9d9d9;
border-radius: 10px;
overflow: hidden;
box-shadow: 5px 5px 20px #555;
}
.screen {
width: 80%;
height: 60%;
background-color: white;
position: absolute;
top: 10%;
left: 10%;
border-radius: 5px;
overflow: hidden;
box-shadow: inset 0 0 15px #333;
}
.keyboard {
width: 80%;
height: 20%;
position: absolute;
bottom: 10%;
left: 10%;
background-color: #b3b3b3;
border-radius: 5px;
box-shadow: inset 3px 1px 5px rgba(0, 0, 0, 0.3);
}
.trackpad {
width: 30px;
height: 40px;
position: absolute;
bottom: 13%;
left: 55%;
background-color: #b3b3b3;
border-radius: 50%;
box-shadow: inset -3px -1px 5px rgba(0, 0, 0, 0.3);
}
</style>上記のコードは、Mac デバイス ページの基本的な外観構造とスタイルを提供します。次に、画面領域とキーボード領域にコンテンツを追加します。
#ステップ 2: 画面領域のコンテンツを追加する#画面領域では、次のコンテンツを追加できます:
アプリケーション アイコン- 画面の上部にアプリケーション アイコンの行を追加できます。これを実現するには、
ファイルに次のコードを追加します。 <pre class='brush:html;toolbar:false;'><div class="screen">
<div class="app-icons">
<div class="icon">
<img src="./assets/icons/chrome.png" alt="谷歌浏览器" />
<span>Chrome</span>
</div>
<div class="icon">
<img src="./assets/icons/safari.png" alt="Safari 浏览器" />
<span>Safari</span>
</div>
<div class="icon">
<img src="./assets/icons/word.png" alt="Microsoft Word" />
<span>Microsoft Word</span>
</div>
<div class="icon">
<img src="./assets/icons/powerpoint.png" alt="Microsoft PowerPoint" />
<span>Microsoft PowerPoint</span>
</div>
<div class="icon">
<img src="./assets/icons/excel.png" alt="Microsoft Excel" />
<span>Microsoft Excel</span>
</div>
</div>
</div>
<style>
.app-icons {
display: flex;
justify-content: center;
align-items: center;
height: 10%;
padding: 10px;
}
.icon {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px;
cursor: pointer;
}
.icon img {
width: 50px;
height: 50px;
}
.icon span {
font-size: 12px;
white-space: nowrap;
}
</style></pre>
- We次のコードを画面に追加できます。領域は一部のアプリケーション用のウィンドウを作成します。これらのウィンドウには、テキスト、画像、ビデオなどのさまざまな種類のコンテンツを含めることができます。次のコードを
ファイルに追加できます。 <pre class='brush:html;toolbar:false;'><div class="screen">
<div class="app-icons"></div>
<div class="app-windows">
<div class="window">
<div class="title-bar">
<div class="title">蜂巢布局</div>
<div class="controls">
<div class="control"></div>
<div class="control"></div>
<div class="control"></div>
</div>
</div>
<iframe
src="https://vuebeijing.github.io/2019-08-27-codex-in-flames-layout-explained-by-finished-product/"
frameborder="0"
width="100%"
height="100%"
allowfullscreen
></iframe>
</div>
<div class="window">
<div class="title-bar">
<div class="title">Vue CLI 3</div>
<div class="controls">
<div class="control"></div>
<div class="control"></div>
<div class="control"></div>
</div>
</div>
<iframe
src="https://www.npmjs.com/package/@vue/cli"
frameborder="0"
width="100%"
height="100%"
allowfullscreen
></iframe>
</div>
</div>
</div>
<style>
.app-windows {
width: 100%;
height: 90%;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.window {
width: 40%;
height: 350px;
margin: 20px;
border-radius: 5px;
box-shadow: 3px 3px 10px #333;
overflow: hidden;
}
.title-bar {
display: flex;
justify-content: space-between;
align-items: center;
height: 30px;
background-color: #d9d9d9;
padding: 10px;
}
.title {
font-size: 16px;
font-weight: bold;
color: #333;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
width: 70px;
}
.control {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
background-color: #333;
}
.control:last-child {
margin-right: 0;
}
</style></pre> 上記のコードは、それぞれに Web ページがインラインで含まれる 2 つのウィンドウを含む単純なウィンドウ アプリケーションを作成します。
ステップ 3: キーボード領域を改善する
キーボード領域はシミュレートされています。キーボードに多くの機能を追加する必要はなく、入力ボックスのみが必要です。次のコードを
App.vue ファイルに追加できます: <pre class='brush:html;toolbar:false;'><div class="keyboard">
<div class="input-box">
<input type="text" placeholder="开始搜索" />
<span class="search-icon"></span>
</div>
</div>
<style>
.keyboard {
width: 80%;
height: 20%;
position: absolute;
bottom: 10%;
left: 10%;
background-color: #b3b3b3;
border-radius: 5px;
box-shadow: inset 3px 1px 5px rgba(0, 0, 0, 0.3);
}
.input-box {
width: 90%;
height: 60%;
padding: 10px;
box-sizing: border-box;
background-color: white;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
input[type="text"] {
width: 90%;
height: 100%;
padding: 0;
border: none;
outline: none;
font-size: 16px;
}
.search-icon {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #b3b3b3;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
</style></pre>この方法で、MacBook エフェクトを模倣する単純なページを作成し、Vue を使用してページ全体を管理および制御します。ページの動作。このページでは、Vue のコンポーネント化機能、計算プロパティ、およびイベント メカニズムを使用して、アプリケーション ウィンドウとキーボード入力ボックスを切り替える機能を実装します。
概要
Vue.js は、さまざまな複雑な動的ページを簡単に作成できる強力なビュー コントロール機能を提供します。この記事では、Vue を使用して MacBook のようなページ デザインを実現する方法を紹介し、いくつかの一般的な Vue テクノロジとテクニックを示します。柔軟で強力なフロントエンド開発フレームワークを探している場合、Vue.js は間違いなく試してみる価値のあるオプションです。
以上がVue を使用して MacBook のようなページ デザインを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。