初次提交
This commit is contained in:
commit
830aa2f571
3
.browserslistrc
Normal file
3
.browserslistrc
Normal file
@ -0,0 +1,3 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
5
.editorconfig
Normal file
5
.editorconfig
Normal file
@ -0,0 +1,5 @@
|
||||
[*.{js,jsx,ts,tsx,vue}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
16
.eslintrc.js
Normal file
16
.eslintrc.js
Normal file
@ -0,0 +1,16 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/essential'
|
||||
],
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
},
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||
}
|
||||
}
|
||||
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
661
LICENSE
Normal file
661
LICENSE
Normal file
@ -0,0 +1,661 @@
|
||||
GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
Version 3, 19 November 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU Affero General Public License is a free, copyleft license for
|
||||
software and other kinds of works, specifically designed to ensure
|
||||
cooperation with the community in the case of network server software.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
our General Public Licenses are intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
Developers that use our General Public Licenses protect your rights
|
||||
with two steps: (1) assert copyright on the software, and (2) offer
|
||||
you this License which gives you legal permission to copy, distribute
|
||||
and/or modify the software.
|
||||
|
||||
A secondary benefit of defending all users' freedom is that
|
||||
improvements made in alternate versions of the program, if they
|
||||
receive widespread use, become available for other developers to
|
||||
incorporate. Many developers of free software are heartened and
|
||||
encouraged by the resulting cooperation. However, in the case of
|
||||
software used on network servers, this result may fail to come about.
|
||||
The GNU General Public License permits making a modified version and
|
||||
letting the public access it on a server without ever releasing its
|
||||
source code to the public.
|
||||
|
||||
The GNU Affero General Public License is designed specifically to
|
||||
ensure that, in such cases, the modified source code becomes available
|
||||
to the community. It requires the operator of a network server to
|
||||
provide the source code of the modified version running there to the
|
||||
users of that server. Therefore, public use of a modified version, on
|
||||
a publicly accessible server, gives the public access to the source
|
||||
code of the modified version.
|
||||
|
||||
An older license, called the Affero General Public License and
|
||||
published by Affero, was designed to accomplish similar goals. This is
|
||||
a different license, not a version of the Affero GPL, but Affero has
|
||||
released a new version of the Affero GPL which permits relicensing under
|
||||
this license.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU Affero General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Remote Network Interaction; Use with the GNU General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, if you modify the
|
||||
Program, your modified version must prominently offer all users
|
||||
interacting with it remotely through a computer network (if your version
|
||||
supports such interaction) an opportunity to receive the Corresponding
|
||||
Source of your version by providing access to the Corresponding Source
|
||||
from a network server at no charge, through some standard or customary
|
||||
means of facilitating copying of software. This Corresponding Source
|
||||
shall include the Corresponding Source for any work covered by version 3
|
||||
of the GNU General Public License that is incorporated pursuant to the
|
||||
following paragraph.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the work with which it is combined will remain governed by version
|
||||
3 of the GNU General Public License.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU Affero General Public License from time to time. Such new versions
|
||||
will be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU Affero General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU Affero General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU Affero General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If your software can interact with users remotely through a computer
|
||||
network, you should also make sure that it provides a way for users to
|
||||
get its source. For example, if your program is a web application, its
|
||||
interface could display a "Source" link that leads users to an archive
|
||||
of the code. There are many ways you could offer source, and different
|
||||
solutions will be better for different programs; see section 13 for the
|
||||
specific requirements.
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU AGPL, see
|
||||
<http://www.gnu.org/licenses/>.
|
||||
14
babel.config.js
Normal file
14
babel.config.js
Normal file
@ -0,0 +1,14 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
],
|
||||
plugins: [
|
||||
[
|
||||
'component',
|
||||
{
|
||||
libraryName: 'element-ui',
|
||||
styleLibraryName: 'theme-chalk'
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
29982
package-lock.json
generated
Normal file
29982
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
45
package.json
Normal file
45
package.json
Normal file
@ -0,0 +1,45 @@
|
||||
{
|
||||
"name": "poetry-ui",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
|
||||
"build": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"core-js": "^3.6.5",
|
||||
"crypto-js": "^4.1.1",
|
||||
"element-ui": "^2.4.5",
|
||||
"markdown-it": "^12.2.0",
|
||||
"markdown-it-multimd-table": "^4.2.3",
|
||||
"mavon-editor": "^2.9.1",
|
||||
"qs": "^6.10.3",
|
||||
"vue": "^2.6.11",
|
||||
"vue-baberrage": "^3.2.4",
|
||||
"vue-router": "^3.2.0",
|
||||
"vue-seamless-scroll": "^1.1.23",
|
||||
"vue-video-player": "^5.0.2",
|
||||
"vuex": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-plugin-router": "~4.5.0",
|
||||
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/eslint-config-standard": "^5.1.2",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-plugin-component": "^1.1.1",
|
||||
"compression-webpack-plugin": "^4.0.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-import": "^2.20.2",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-promise": "^4.2.1",
|
||||
"eslint-plugin-standard": "^4.0.0",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"vue-cli-plugin-element": "^1.0.1",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
}
|
||||
}
|
||||
7
public/assets/animate.min.css
vendored
Normal file
7
public/assets/animate.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
954
public/assets/clipboard.js
Normal file
954
public/assets/clipboard.js
Normal file
@ -0,0 +1,954 @@
|
||||
/*!
|
||||
* clipboard.js v2.0.8
|
||||
* https://clipboardjs.com/
|
||||
*
|
||||
* Licensed MIT © Zeno Rocha
|
||||
*/
|
||||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory();
|
||||
else if(typeof define === 'function' && define.amd)
|
||||
define([], factory);
|
||||
else if(typeof exports === 'object')
|
||||
exports["ClipboardJS"] = factory();
|
||||
else
|
||||
root["ClipboardJS"] = factory();
|
||||
})(this, function() {
|
||||
return /******/ (function() { // webpackBootstrap
|
||||
/******/ var __webpack_modules__ = ({
|
||||
|
||||
/***/ 134:
|
||||
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
// EXPORTS
|
||||
__webpack_require__.d(__webpack_exports__, {
|
||||
"default": function() { return /* binding */ clipboard; }
|
||||
});
|
||||
|
||||
// EXTERNAL MODULE: ./node_modules/tiny-emitter/index.js
|
||||
var tiny_emitter = __webpack_require__(279);
|
||||
var tiny_emitter_default = /*#__PURE__*/__webpack_require__.n(tiny_emitter);
|
||||
// EXTERNAL MODULE: ./node_modules/good-listener/src/listen.js
|
||||
var listen = __webpack_require__(370);
|
||||
var listen_default = /*#__PURE__*/__webpack_require__.n(listen);
|
||||
// EXTERNAL MODULE: ./node_modules/select/src/select.js
|
||||
var src_select = __webpack_require__(817);
|
||||
var select_default = /*#__PURE__*/__webpack_require__.n(src_select);
|
||||
;// CONCATENATED MODULE: ./src/clipboard-action.js
|
||||
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
||||
|
||||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
||||
|
||||
|
||||
/**
|
||||
* Inner class which performs selection from either `text` or `target`
|
||||
* properties and then executes copy or cut operations.
|
||||
*/
|
||||
|
||||
var ClipboardAction = /*#__PURE__*/function () {
|
||||
/**
|
||||
* @param {Object} options
|
||||
*/
|
||||
function ClipboardAction(options) {
|
||||
_classCallCheck(this, ClipboardAction);
|
||||
|
||||
this.resolveOptions(options);
|
||||
this.initSelection();
|
||||
}
|
||||
/**
|
||||
* Defines base properties passed from constructor.
|
||||
* @param {Object} options
|
||||
*/
|
||||
|
||||
|
||||
_createClass(ClipboardAction, [{
|
||||
key: "resolveOptions",
|
||||
value: function resolveOptions() {
|
||||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
this.action = options.action;
|
||||
this.container = options.container;
|
||||
this.emitter = options.emitter;
|
||||
this.target = options.target;
|
||||
this.text = options.text;
|
||||
this.trigger = options.trigger;
|
||||
this.selectedText = '';
|
||||
}
|
||||
/**
|
||||
* Decides which selection strategy is going to be applied based
|
||||
* on the existence of `text` and `target` properties.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "initSelection",
|
||||
value: function initSelection() {
|
||||
if (this.text) {
|
||||
this.selectFake();
|
||||
} else if (this.target) {
|
||||
this.selectTarget();
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Creates a fake textarea element, sets its value from `text` property,
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "createFakeElement",
|
||||
value: function createFakeElement() {
|
||||
var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
|
||||
this.fakeElem = document.createElement('textarea'); // Prevent zooming on iOS
|
||||
|
||||
this.fakeElem.style.fontSize = '12pt'; // Reset box model
|
||||
|
||||
this.fakeElem.style.border = '0';
|
||||
this.fakeElem.style.padding = '0';
|
||||
this.fakeElem.style.margin = '0'; // Move element out of screen horizontally
|
||||
|
||||
this.fakeElem.style.position = 'absolute';
|
||||
this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px'; // Move element to the same position vertically
|
||||
|
||||
var yPosition = window.pageYOffset || document.documentElement.scrollTop;
|
||||
this.fakeElem.style.top = "".concat(yPosition, "px");
|
||||
this.fakeElem.setAttribute('readonly', '');
|
||||
this.fakeElem.value = this.text;
|
||||
return this.fakeElem;
|
||||
}
|
||||
/**
|
||||
* Get's the value of fakeElem,
|
||||
* and makes a selection on it.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "selectFake",
|
||||
value: function selectFake() {
|
||||
var _this = this;
|
||||
|
||||
var fakeElem = this.createFakeElement();
|
||||
|
||||
this.fakeHandlerCallback = function () {
|
||||
return _this.removeFake();
|
||||
};
|
||||
|
||||
this.fakeHandler = this.container.addEventListener('click', this.fakeHandlerCallback) || true;
|
||||
this.container.appendChild(fakeElem);
|
||||
this.selectedText = select_default()(fakeElem);
|
||||
this.copyText();
|
||||
this.removeFake();
|
||||
}
|
||||
/**
|
||||
* Only removes the fake element after another click event, that way
|
||||
* a user can hit `Ctrl+C` to copy because selection still exists.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "removeFake",
|
||||
value: function removeFake() {
|
||||
if (this.fakeHandler) {
|
||||
this.container.removeEventListener('click', this.fakeHandlerCallback);
|
||||
this.fakeHandler = null;
|
||||
this.fakeHandlerCallback = null;
|
||||
}
|
||||
|
||||
if (this.fakeElem) {
|
||||
this.container.removeChild(this.fakeElem);
|
||||
this.fakeElem = null;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Selects the content from element passed on `target` property.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "selectTarget",
|
||||
value: function selectTarget() {
|
||||
this.selectedText = select_default()(this.target);
|
||||
this.copyText();
|
||||
}
|
||||
/**
|
||||
* Executes the copy operation based on the current selection.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "copyText",
|
||||
value: function copyText() {
|
||||
var succeeded;
|
||||
|
||||
try {
|
||||
succeeded = document.execCommand(this.action);
|
||||
} catch (err) {
|
||||
succeeded = false;
|
||||
}
|
||||
|
||||
this.handleResult(succeeded);
|
||||
}
|
||||
/**
|
||||
* Fires an event based on the copy operation result.
|
||||
* @param {Boolean} succeeded
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "handleResult",
|
||||
value: function handleResult(succeeded) {
|
||||
this.emitter.emit(succeeded ? 'success' : 'error', {
|
||||
action: this.action,
|
||||
text: this.selectedText,
|
||||
trigger: this.trigger,
|
||||
clearSelection: this.clearSelection.bind(this)
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Moves focus away from `target` and back to the trigger, removes current selection.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "clearSelection",
|
||||
value: function clearSelection() {
|
||||
if (this.trigger) {
|
||||
this.trigger.focus();
|
||||
}
|
||||
|
||||
document.activeElement.blur();
|
||||
window.getSelection().removeAllRanges();
|
||||
}
|
||||
/**
|
||||
* Sets the `action` to be performed which can be either 'copy' or 'cut'.
|
||||
* @param {String} action
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "destroy",
|
||||
|
||||
/**
|
||||
* Destroy lifecycle.
|
||||
*/
|
||||
value: function destroy() {
|
||||
this.removeFake();
|
||||
}
|
||||
}, {
|
||||
key: "action",
|
||||
set: function set() {
|
||||
var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'copy';
|
||||
this._action = action;
|
||||
|
||||
if (this._action !== 'copy' && this._action !== 'cut') {
|
||||
throw new Error('Invalid "action" value, use either "copy" or "cut"');
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Gets the `action` property.
|
||||
* @return {String}
|
||||
*/
|
||||
,
|
||||
get: function get() {
|
||||
return this._action;
|
||||
}
|
||||
/**
|
||||
* Sets the `target` property using an element
|
||||
* that will be have its content copied.
|
||||
* @param {Element} target
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "target",
|
||||
set: function set(target) {
|
||||
if (target !== undefined) {
|
||||
if (target && _typeof(target) === 'object' && target.nodeType === 1) {
|
||||
if (this.action === 'copy' && target.hasAttribute('disabled')) {
|
||||
throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
|
||||
}
|
||||
|
||||
if (this.action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {
|
||||
throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');
|
||||
}
|
||||
|
||||
this._target = target;
|
||||
} else {
|
||||
throw new Error('Invalid "target" value, use a valid Element');
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Gets the `target` property.
|
||||
* @return {String|HTMLElement}
|
||||
*/
|
||||
,
|
||||
get: function get() {
|
||||
return this._target;
|
||||
}
|
||||
}]);
|
||||
|
||||
return ClipboardAction;
|
||||
}();
|
||||
|
||||
/* harmony default export */ var clipboard_action = (ClipboardAction);
|
||||
;// CONCATENATED MODULE: ./src/clipboard.js
|
||||
function clipboard_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { clipboard_typeof = function _typeof(obj) { return typeof obj; }; } else { clipboard_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return clipboard_typeof(obj); }
|
||||
|
||||
function clipboard_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function clipboard_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
||||
|
||||
function clipboard_createClass(Constructor, protoProps, staticProps) { if (protoProps) clipboard_defineProperties(Constructor.prototype, protoProps); if (staticProps) clipboard_defineProperties(Constructor, staticProps); return Constructor; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
||||
|
||||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
||||
|
||||
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (call && (clipboard_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
||||
|
||||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
||||
|
||||
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
|
||||
|
||||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Helper function to retrieve attribute value.
|
||||
* @param {String} suffix
|
||||
* @param {Element} element
|
||||
*/
|
||||
|
||||
function getAttributeValue(suffix, element) {
|
||||
var attribute = "data-clipboard-".concat(suffix);
|
||||
|
||||
if (!element.hasAttribute(attribute)) {
|
||||
return;
|
||||
}
|
||||
|
||||
return element.getAttribute(attribute);
|
||||
}
|
||||
/**
|
||||
* Base class which takes one or more elements, adds event listeners to them,
|
||||
* and instantiates a new `ClipboardAction` on each click.
|
||||
*/
|
||||
|
||||
|
||||
var Clipboard = /*#__PURE__*/function (_Emitter) {
|
||||
_inherits(Clipboard, _Emitter);
|
||||
|
||||
var _super = _createSuper(Clipboard);
|
||||
|
||||
/**
|
||||
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger
|
||||
* @param {Object} options
|
||||
*/
|
||||
function Clipboard(trigger, options) {
|
||||
var _this;
|
||||
|
||||
clipboard_classCallCheck(this, Clipboard);
|
||||
|
||||
_this = _super.call(this);
|
||||
|
||||
_this.resolveOptions(options);
|
||||
|
||||
_this.listenClick(trigger);
|
||||
|
||||
return _this;
|
||||
}
|
||||
/**
|
||||
* Defines if attributes would be resolved using internal setter functions
|
||||
* or custom functions that were passed in the constructor.
|
||||
* @param {Object} options
|
||||
*/
|
||||
|
||||
|
||||
clipboard_createClass(Clipboard, [{
|
||||
key: "resolveOptions",
|
||||
value: function resolveOptions() {
|
||||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
this.action = typeof options.action === 'function' ? options.action : this.defaultAction;
|
||||
this.target = typeof options.target === 'function' ? options.target : this.defaultTarget;
|
||||
this.text = typeof options.text === 'function' ? options.text : this.defaultText;
|
||||
this.container = clipboard_typeof(options.container) === 'object' ? options.container : document.body;
|
||||
}
|
||||
/**
|
||||
* Adds a click event listener to the passed trigger.
|
||||
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "listenClick",
|
||||
value: function listenClick(trigger) {
|
||||
var _this2 = this;
|
||||
|
||||
this.listener = listen_default()(trigger, 'click', function (e) {
|
||||
return _this2.onClick(e);
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Defines a new `ClipboardAction` on each click event.
|
||||
* @param {Event} e
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "onClick",
|
||||
value: function onClick(e) {
|
||||
var trigger = e.delegateTarget || e.currentTarget;
|
||||
|
||||
if (this.clipboardAction) {
|
||||
this.clipboardAction = null;
|
||||
}
|
||||
|
||||
this.clipboardAction = new clipboard_action({
|
||||
action: this.action(trigger),
|
||||
target: this.target(trigger),
|
||||
text: this.text(trigger),
|
||||
container: this.container,
|
||||
trigger: trigger,
|
||||
emitter: this
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Default `action` lookup function.
|
||||
* @param {Element} trigger
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "defaultAction",
|
||||
value: function defaultAction(trigger) {
|
||||
return getAttributeValue('action', trigger);
|
||||
}
|
||||
/**
|
||||
* Default `target` lookup function.
|
||||
* @param {Element} trigger
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "defaultTarget",
|
||||
value: function defaultTarget(trigger) {
|
||||
var selector = getAttributeValue('target', trigger);
|
||||
|
||||
if (selector) {
|
||||
return document.querySelector(selector);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Returns the support of the given action, or all actions if no action is
|
||||
* given.
|
||||
* @param {String} [action]
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "defaultText",
|
||||
|
||||
/**
|
||||
* Default `text` lookup function.
|
||||
* @param {Element} trigger
|
||||
*/
|
||||
value: function defaultText(trigger) {
|
||||
return getAttributeValue('text', trigger);
|
||||
}
|
||||
/**
|
||||
* Destroy lifecycle.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "destroy",
|
||||
value: function destroy() {
|
||||
this.listener.destroy();
|
||||
|
||||
if (this.clipboardAction) {
|
||||
this.clipboardAction.destroy();
|
||||
this.clipboardAction = null;
|
||||
}
|
||||
}
|
||||
}], [{
|
||||
key: "isSupported",
|
||||
value: function isSupported() {
|
||||
var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['copy', 'cut'];
|
||||
var actions = typeof action === 'string' ? [action] : action;
|
||||
var support = !!document.queryCommandSupported;
|
||||
actions.forEach(function (action) {
|
||||
support = support && !!document.queryCommandSupported(action);
|
||||
});
|
||||
return support;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Clipboard;
|
||||
}((tiny_emitter_default()));
|
||||
|
||||
/* harmony default export */ var clipboard = (Clipboard);
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 828:
|
||||
/***/ (function(module) {
|
||||
|
||||
var DOCUMENT_NODE_TYPE = 9;
|
||||
|
||||
/**
|
||||
* A polyfill for Element.matches()
|
||||
*/
|
||||
if (typeof Element !== 'undefined' && !Element.prototype.matches) {
|
||||
var proto = Element.prototype;
|
||||
|
||||
proto.matches = proto.matchesSelector ||
|
||||
proto.mozMatchesSelector ||
|
||||
proto.msMatchesSelector ||
|
||||
proto.oMatchesSelector ||
|
||||
proto.webkitMatchesSelector;
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds the closest parent that matches a selector.
|
||||
*
|
||||
* @param {Element} element
|
||||
* @param {String} selector
|
||||
* @return {Function}
|
||||
*/
|
||||
function closest (element, selector) {
|
||||
while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {
|
||||
if (typeof element.matches === 'function' &&
|
||||
element.matches(selector)) {
|
||||
return element;
|
||||
}
|
||||
element = element.parentNode;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = closest;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 438:
|
||||
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
|
||||
|
||||
var closest = __webpack_require__(828);
|
||||
|
||||
/**
|
||||
* Delegates event to a selector.
|
||||
*
|
||||
* @param {Element} element
|
||||
* @param {String} selector
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @param {Boolean} useCapture
|
||||
* @return {Object}
|
||||
*/
|
||||
function _delegate(element, selector, type, callback, useCapture) {
|
||||
var listenerFn = listener.apply(this, arguments);
|
||||
|
||||
element.addEventListener(type, listenerFn, useCapture);
|
||||
|
||||
return {
|
||||
destroy: function() {
|
||||
element.removeEventListener(type, listenerFn, useCapture);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Delegates event to a selector.
|
||||
*
|
||||
* @param {Element|String|Array} [elements]
|
||||
* @param {String} selector
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @param {Boolean} useCapture
|
||||
* @return {Object}
|
||||
*/
|
||||
function delegate(elements, selector, type, callback, useCapture) {
|
||||
// Handle the regular Element usage
|
||||
if (typeof elements.addEventListener === 'function') {
|
||||
return _delegate.apply(null, arguments);
|
||||
}
|
||||
|
||||
// Handle Element-less usage, it defaults to global delegation
|
||||
if (typeof type === 'function') {
|
||||
// Use `document` as the first parameter, then apply arguments
|
||||
// This is a short way to .unshift `arguments` without running into deoptimizations
|
||||
return _delegate.bind(null, document).apply(null, arguments);
|
||||
}
|
||||
|
||||
// Handle Selector-based usage
|
||||
if (typeof elements === 'string') {
|
||||
elements = document.querySelectorAll(elements);
|
||||
}
|
||||
|
||||
// Handle Array-like based usage
|
||||
return Array.prototype.map.call(elements, function (element) {
|
||||
return _delegate(element, selector, type, callback, useCapture);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds closest match and invokes callback.
|
||||
*
|
||||
* @param {Element} element
|
||||
* @param {String} selector
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Function}
|
||||
*/
|
||||
function listener(element, selector, type, callback) {
|
||||
return function(e) {
|
||||
e.delegateTarget = closest(e.target, selector);
|
||||
|
||||
if (e.delegateTarget) {
|
||||
callback.call(element, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = delegate;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 879:
|
||||
/***/ (function(__unused_webpack_module, exports) {
|
||||
|
||||
/**
|
||||
* Check if argument is a HTML element.
|
||||
*
|
||||
* @param {Object} value
|
||||
* @return {Boolean}
|
||||
*/
|
||||
exports.node = function(value) {
|
||||
return value !== undefined
|
||||
&& value instanceof HTMLElement
|
||||
&& value.nodeType === 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if argument is a list of HTML elements.
|
||||
*
|
||||
* @param {Object} value
|
||||
* @return {Boolean}
|
||||
*/
|
||||
exports.nodeList = function(value) {
|
||||
var type = Object.prototype.toString.call(value);
|
||||
|
||||
return value !== undefined
|
||||
&& (type === '[object NodeList]' || type === '[object HTMLCollection]')
|
||||
&& ('length' in value)
|
||||
&& (value.length === 0 || exports.node(value[0]));
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if argument is a string.
|
||||
*
|
||||
* @param {Object} value
|
||||
* @return {Boolean}
|
||||
*/
|
||||
exports.string = function(value) {
|
||||
return typeof value === 'string'
|
||||
|| value instanceof String;
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if argument is a function.
|
||||
*
|
||||
* @param {Object} value
|
||||
* @return {Boolean}
|
||||
*/
|
||||
exports.fn = function(value) {
|
||||
var type = Object.prototype.toString.call(value);
|
||||
|
||||
return type === '[object Function]';
|
||||
};
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 370:
|
||||
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
|
||||
|
||||
var is = __webpack_require__(879);
|
||||
var delegate = __webpack_require__(438);
|
||||
|
||||
/**
|
||||
* Validates all params and calls the right
|
||||
* listener function based on its target type.
|
||||
*
|
||||
* @param {String|HTMLElement|HTMLCollection|NodeList} target
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Object}
|
||||
*/
|
||||
function listen(target, type, callback) {
|
||||
if (!target && !type && !callback) {
|
||||
throw new Error('Missing required arguments');
|
||||
}
|
||||
|
||||
if (!is.string(type)) {
|
||||
throw new TypeError('Second argument must be a String');
|
||||
}
|
||||
|
||||
if (!is.fn(callback)) {
|
||||
throw new TypeError('Third argument must be a Function');
|
||||
}
|
||||
|
||||
if (is.node(target)) {
|
||||
return listenNode(target, type, callback);
|
||||
}
|
||||
else if (is.nodeList(target)) {
|
||||
return listenNodeList(target, type, callback);
|
||||
}
|
||||
else if (is.string(target)) {
|
||||
return listenSelector(target, type, callback);
|
||||
}
|
||||
else {
|
||||
throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds an event listener to a HTML element
|
||||
* and returns a remove listener function.
|
||||
*
|
||||
* @param {HTMLElement} node
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Object}
|
||||
*/
|
||||
function listenNode(node, type, callback) {
|
||||
node.addEventListener(type, callback);
|
||||
|
||||
return {
|
||||
destroy: function() {
|
||||
node.removeEventListener(type, callback);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add an event listener to a list of HTML elements
|
||||
* and returns a remove listener function.
|
||||
*
|
||||
* @param {NodeList|HTMLCollection} nodeList
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Object}
|
||||
*/
|
||||
function listenNodeList(nodeList, type, callback) {
|
||||
Array.prototype.forEach.call(nodeList, function(node) {
|
||||
node.addEventListener(type, callback);
|
||||
});
|
||||
|
||||
return {
|
||||
destroy: function() {
|
||||
Array.prototype.forEach.call(nodeList, function(node) {
|
||||
node.removeEventListener(type, callback);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add an event listener to a selector
|
||||
* and returns a remove listener function.
|
||||
*
|
||||
* @param {String} selector
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Object}
|
||||
*/
|
||||
function listenSelector(selector, type, callback) {
|
||||
return delegate(document.body, selector, type, callback);
|
||||
}
|
||||
|
||||
module.exports = listen;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 817:
|
||||
/***/ (function(module) {
|
||||
|
||||
function select(element) {
|
||||
var selectedText;
|
||||
|
||||
if (element.nodeName === 'SELECT') {
|
||||
element.focus();
|
||||
|
||||
selectedText = element.value;
|
||||
}
|
||||
else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
|
||||
var isReadOnly = element.hasAttribute('readonly');
|
||||
|
||||
if (!isReadOnly) {
|
||||
element.setAttribute('readonly', '');
|
||||
}
|
||||
|
||||
element.select();
|
||||
element.setSelectionRange(0, element.value.length);
|
||||
|
||||
if (!isReadOnly) {
|
||||
element.removeAttribute('readonly');
|
||||
}
|
||||
|
||||
selectedText = element.value;
|
||||
}
|
||||
else {
|
||||
if (element.hasAttribute('contenteditable')) {
|
||||
element.focus();
|
||||
}
|
||||
|
||||
var selection = window.getSelection();
|
||||
var range = document.createRange();
|
||||
|
||||
range.selectNodeContents(element);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
|
||||
selectedText = selection.toString();
|
||||
}
|
||||
|
||||
return selectedText;
|
||||
}
|
||||
|
||||
module.exports = select;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 279:
|
||||
/***/ (function(module) {
|
||||
|
||||
function E () {
|
||||
// Keep this empty so it's easier to inherit from
|
||||
// (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
|
||||
}
|
||||
|
||||
E.prototype = {
|
||||
on: function (name, callback, ctx) {
|
||||
var e = this.e || (this.e = {});
|
||||
|
||||
(e[name] || (e[name] = [])).push({
|
||||
fn: callback,
|
||||
ctx: ctx
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
once: function (name, callback, ctx) {
|
||||
var self = this;
|
||||
function listener () {
|
||||
self.off(name, listener);
|
||||
callback.apply(ctx, arguments);
|
||||
};
|
||||
|
||||
listener._ = callback
|
||||
return this.on(name, listener, ctx);
|
||||
},
|
||||
|
||||
emit: function (name) {
|
||||
var data = [].slice.call(arguments, 1);
|
||||
var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
|
||||
var i = 0;
|
||||
var len = evtArr.length;
|
||||
|
||||
for (i; i < len; i++) {
|
||||
evtArr[i].fn.apply(evtArr[i].ctx, data);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
off: function (name, callback) {
|
||||
var e = this.e || (this.e = {});
|
||||
var evts = e[name];
|
||||
var liveEvents = [];
|
||||
|
||||
if (evts && callback) {
|
||||
for (var i = 0, len = evts.length; i < len; i++) {
|
||||
if (evts[i].fn !== callback && evts[i].fn._ !== callback)
|
||||
liveEvents.push(evts[i]);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove event from queue to prevent memory leak
|
||||
// Suggested by https://github.com/lazd
|
||||
// Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
|
||||
|
||||
(liveEvents.length)
|
||||
? e[name] = liveEvents
|
||||
: delete e[name];
|
||||
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = E;
|
||||
module.exports.TinyEmitter = E;
|
||||
|
||||
|
||||
/***/ })
|
||||
|
||||
/******/ });
|
||||
/************************************************************************/
|
||||
/******/ // The module cache
|
||||
/******/ var __webpack_module_cache__ = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(__webpack_module_cache__[moduleId]) {
|
||||
/******/ return __webpack_module_cache__[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = __webpack_module_cache__[moduleId] = {
|
||||
/******/ // no module.id needed
|
||||
/******/ // no module.loaded needed
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/************************************************************************/
|
||||
/******/ /* webpack/runtime/compat get default export */
|
||||
/******/ !function() {
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function() { return module['default']; } :
|
||||
/******/ function() { return module; };
|
||||
/******/ __webpack_require__.d(getter, { a: getter });
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/ }();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/define property getters */
|
||||
/******/ !function() {
|
||||
/******/ // define getter functions for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, definition) {
|
||||
/******/ for(var key in definition) {
|
||||
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
||||
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/ }();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
||||
/******/ !function() {
|
||||
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
|
||||
/******/ }();
|
||||
/******/
|
||||
/************************************************************************/
|
||||
/******/ // module exports must be returned from runtime so entry inlining is disabled
|
||||
/******/ // startup
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(134);
|
||||
/******/ })()
|
||||
.default;
|
||||
});
|
||||
1120
public/assets/highlight.min.js
vendored
Normal file
1120
public/assets/highlight.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/highlightjs-line-numbers.min.js
vendored
Normal file
1
public/assets/highlightjs-line-numbers.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
!function(r,o){"use strict";var e,i="hljs-ln",l="hljs-ln-line",h="hljs-ln-code",s="hljs-ln-numbers",c="hljs-ln-n",m="data-line-number",a=/\r\n|\r|\n/g;function u(e){for(var n=e.toString(),t=e.anchorNode;"TD"!==t.nodeName;)t=t.parentNode;for(var r=e.focusNode;"TD"!==r.nodeName;)r=r.parentNode;var o=parseInt(t.dataset.lineNumber),a=parseInt(r.dataset.lineNumber);if(o==a)return n;var i,l=t.textContent,s=r.textContent;for(a<o&&(i=o,o=a,a=i,i=l,l=s,s=i);0!==n.indexOf(l);)l=l.slice(1);for(;-1===n.lastIndexOf(s);)s=s.slice(0,-1);for(var c=l,u=function(e){for(var n=e;"TABLE"!==n.nodeName;)n=n.parentNode;return n}(t),d=o+1;d<a;++d){var f=p('.{0}[{1}="{2}"]',[h,m,d]);c+="\n"+u.querySelector(f).textContent}return c+="\n"+s}function n(e){try{var n=o.querySelectorAll("code.hljs,code.nohighlight");for(var t in n)n.hasOwnProperty(t)&&(n[t].classList.contains("nohljsln")||d(n[t],e))}catch(e){r.console.error("LineNumbers error: ",e)}}function d(e,n){"object"==typeof e&&r.setTimeout(function(){e.innerHTML=f(e,n)},0)}function f(e,n){var t,r,o=(t=e,{singleLine:function(e){return!!e.singleLine&&e.singleLine}(r=(r=n)||{}),startFrom:function(e,n){var t=1;isFinite(n.startFrom)&&(t=n.startFrom);var r=function(e,n){return e.hasAttribute(n)?e.getAttribute(n):null}(e,"data-ln-start-from");return null!==r&&(t=function(e,n){if(!e)return n;var t=Number(e);return isFinite(t)?t:n}(r,1)),t}(t,r)});return function e(n){var t=n.childNodes;for(var r in t){var o;t.hasOwnProperty(r)&&(o=t[r],0<(o.textContent.trim().match(a)||[]).length&&(0<o.childNodes.length?e(o):v(o.parentNode)))}}(e),function(e,n){var t=g(e);""===t[t.length-1].trim()&&t.pop();if(1<t.length||n.singleLine){for(var r="",o=0,a=t.length;o<a;o++)r+=p('<tr><td class="{0} {1}" {3}="{5}"><div class="{2}" {3}="{5}"></div></td><td class="{0} {4}" {3}="{5}">{6}</td></tr>',[l,s,c,m,h,o+n.startFrom,0<t[o].length?t[o]:" "]);return p('<table class="{0}">{1}</table>',[i,r])}return e}(e.innerHTML,o)}function v(e){var n=e.className;if(/hljs-/.test(n)){for(var t=g(e.innerHTML),r=0,o="";r<t.length;r++){o+=p('<span class="{0}">{1}</span>\n',[n,0<t[r].length?t[r]:" "])}e.innerHTML=o.trim()}}function g(e){return 0===e.length?[]:e.split(a)}function p(e,t){return e.replace(/\{(\d+)\}/g,function(e,n){return void 0!==t[n]?t[n]:e})}r.hljs?(r.hljs.initLineNumbersOnLoad=function(e){"interactive"===o.readyState||"complete"===o.readyState?n(e):r.addEventListener("DOMContentLoaded",function(){n(e)})},r.hljs.lineNumbersBlock=d,r.hljs.lineNumbersValue=function(e,n){if("string"!=typeof e)return;var t=document.createElement("code");return t.innerHTML=e,f(t,n)},(e=o.createElement("style")).type="text/css",e.innerHTML=p(".{0}{border-collapse:collapse}.{0} td{padding:0}.{1}:before{content:attr({2})}",[i,c,m]),o.getElementsByTagName("head")[0].appendChild(e)):r.console.error("highlight.js not detected!"),document.addEventListener("copy",function(e){var n,t=window.getSelection();!function(e){for(var n=e;n;){if(n.className&&-1!==n.className.indexOf("hljs-ln-code"))return 1;n=n.parentNode}}(t.anchorNode)||(n=-1!==window.navigator.userAgent.indexOf("Edge")?u(t):t.toString(),e.clipboardData.setData("text/plain",n),e.preventDefault())})}(window,document);
|
||||
5
public/assets/jquery.min.js
vendored
Normal file
5
public/assets/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
public/assets/qiniu.min.js
vendored
Normal file
2
public/assets/qiniu.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
public/assets/wow.min.js
vendored
Normal file
2
public/assets/wow.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
42
public/index.html
Normal file
42
public/index.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="./poetize.jpg" sizes="16x16">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>POETIZE</title>
|
||||
<meta name="keywords" content="POETIZE,Sara,生活倒影,最美博客,个人博客,个人网站,生活笔记,记录生活,Java,SpringBoot,Vue,Vue2,Vue3,IM,聊天室">
|
||||
<meta name="description" content="POETIZE：作诗，有诗意地描写。这是我的个人网站，我的生活倒影，有诗意地记录自己的生活。它是一个 SpringBoot + Vue2 + Vue3 的产物。">
|
||||
<meta name="author" content="Sara">
|
||||
<link rel="canonical" href="https://poetize.cn">
|
||||
|
||||
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>-->
|
||||
<!-- <script src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>-->
|
||||
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>-->
|
||||
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>-->
|
||||
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>-->
|
||||
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.js"></script>-->
|
||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/qiniu-js/3.4.0/qiniu.min.js"></script>-->
|
||||
|
||||
<script src="/assets/jquery.min.js"></script>
|
||||
<script src="/assets/highlight.min.js"></script>
|
||||
<script src="/assets/wow.min.js"></script>
|
||||
<script src="/assets/highlightjs-line-numbers.min.js"></script>
|
||||
<script src="/assets/clipboard.js"></script>
|
||||
<script src="/assets/qiniu.min.js"></script>
|
||||
<link rel="stylesheet" href="/assets/animate.min.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script>
|
||||
new WOW().init();
|
||||
</script>
|
||||
</html>
|
||||
BIN
public/poetize.jpg
Normal file
BIN
public/poetize.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
31
src/App.vue
Normal file
31
src/App.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
226
src/assets/css/animation.css
Normal file
226
src/assets/css/animation.css
Normal file
@ -0,0 +1,226 @@
|
||||
/* 以my-animation-开头的class */
|
||||
[class*=my-animation-] {
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
|
||||
.my-animation-slide-top {
|
||||
animation-name: slide-top
|
||||
}
|
||||
|
||||
.my-animation-slide-bottom {
|
||||
animation-name: slide-bottom
|
||||
}
|
||||
|
||||
.my-animation-hideToShow {
|
||||
animation-name: hideToShow
|
||||
}
|
||||
|
||||
|
||||
/* 上移 */
|
||||
@keyframes slide-top {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20%)
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
/* 下移 */
|
||||
@keyframes slide-bottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20%)
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
/* 首图动画：下移 */
|
||||
@keyframes header-effect {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 旋转 */
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 显示 */
|
||||
@keyframes hideToShow {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 下移 */
|
||||
@keyframes my-shake {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 0.5;
|
||||
transform: translateY(25px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 上移 */
|
||||
@keyframes scatter {
|
||||
0% {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 放大 */
|
||||
@keyframes scale {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 放大 */
|
||||
@keyframes imgScale {
|
||||
0% {
|
||||
transform: scale(0.8, 0.8);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1.3, 1.3);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.8, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
/* 渐变 */
|
||||
@keyframes jianBian {
|
||||
to {
|
||||
background-position: -2000rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 背景位置移动 */
|
||||
@keyframes gradientBG {
|
||||
0% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 阴影变化 */
|
||||
@keyframes weiYanShadowFlashing {
|
||||
0% {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 15px var(--red);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 有小变大 */
|
||||
@keyframes zoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(.3, .3, .3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 由左开向右 */
|
||||
@keyframes passing {
|
||||
0% {
|
||||
transform: translateX(-150%);
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(0);
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(150%);
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
/* 由左开向右 */
|
||||
@keyframes passingShow {
|
||||
0% {
|
||||
transform: translateX(-200%);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
}
|
||||
75
src/assets/css/color.css
Normal file
75
src/assets/css/color.css
Normal file
@ -0,0 +1,75 @@
|
||||
:root {
|
||||
/* 背景 */
|
||||
--background: white;
|
||||
--gradualBackground: linear-gradient(to right bottom, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||
--favoriteBg: #f7f9fe;
|
||||
|
||||
/* 字体 */
|
||||
--fontColor: black;
|
||||
/* 边框 */
|
||||
--borderColor: rgba(0, 0, 0, 0.5);
|
||||
/* 边框 */
|
||||
--borderHoverColor: rgba(110, 110, 110, 0.4);
|
||||
/* 文章字体 */
|
||||
--articleFontColor: #1f1f1f;
|
||||
/* 文章灰色字体 */
|
||||
--articleGreyFontColor: #616161;
|
||||
/* 评论背景颜色 */
|
||||
--commentContent: #F7F9FE;
|
||||
|
||||
|
||||
/* 主题背景 */
|
||||
--themeBackground: orange;
|
||||
/* 主题悬停背景 */
|
||||
--gradualRed: linear-gradient(to right, #ff4b2b, #ff416c);
|
||||
|
||||
/* 导航栏字体 */
|
||||
--toolbarFont: #333333;
|
||||
/* 导航栏背景 */
|
||||
--toolbarBackground: rgba(255, 255, 255, 1);
|
||||
/* 灰色字体 */
|
||||
--greyFont: #797979;
|
||||
--maxGreyFont: #595A5A;
|
||||
/* footer背景 */
|
||||
--gradientBG: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||
/* 白色遮罩 */
|
||||
--whiteMask: rgba(255, 255, 255, 0.3);
|
||||
/* max白色遮罩 */
|
||||
--maxWhiteMask: rgba(255, 255, 255, 0.5);
|
||||
--maxMaxWhiteMask: rgba(255, 255, 255, 0.7);
|
||||
/* mini白色遮罩 */
|
||||
--miniWhiteMask: rgba(255, 255, 255, 0.15);
|
||||
/* 透明 */
|
||||
--transparent: rgba(0, 0, 0, 0);
|
||||
/* mini黑色遮罩 */
|
||||
--miniMask: rgba(0, 0, 0, 0.15);
|
||||
/* 黑色遮罩 */
|
||||
--mask: rgba(0, 0, 0, 0.3);
|
||||
/* 半透明 */
|
||||
--translucent: rgba(0, 0, 0, 0.5);
|
||||
/* 深黑遮罩 */
|
||||
--maxMask: rgba(0, 0, 0, 0.7);
|
||||
|
||||
|
||||
--white: white;
|
||||
|
||||
--red: red;
|
||||
--lightRed: #ff4b2b;
|
||||
--maxLightRed: #ff416c;
|
||||
--orangeRed: #EF794F;
|
||||
|
||||
--azure: #ECF7FE;
|
||||
--blue: rgb(3, 169, 244);
|
||||
|
||||
--lightGray: #DDDDDD;
|
||||
--maxLightGray: #EEEEEE;
|
||||
--maxMaxLightGray: rgba(242, 242, 242, 0.5);
|
||||
|
||||
--lightGreen: #39c5bb;
|
||||
|
||||
--green: #67C23A;
|
||||
--black: black;
|
||||
--lightYellow: #F4E1C0;
|
||||
|
||||
--globalFont: poetize-font;
|
||||
}
|
||||
4
src/assets/css/font-awesome.min.css
vendored
Normal file
4
src/assets/css/font-awesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
311
src/assets/css/index.css
Normal file
311
src/assets/css/index.css
Normal file
@ -0,0 +1,311 @@
|
||||
/* 通用css */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--fontColor);
|
||||
font-family: var(--globalFont), serif;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
||||
/* 图片 */
|
||||
.background-image {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
/* 固定位置，不随滚动条滚动 */
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.background-image::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.background-image-error {
|
||||
background-color: var(--lightGreen);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
/* 固定位置，不随滚动条滚动 */
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 模块化背景色及透明度 */
|
||||
.background-opacity {
|
||||
/*background: var(--background);*/
|
||||
/*opacity: 0.88;*/
|
||||
}
|
||||
|
||||
.my-el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.my-el-image .image-slot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 遮罩 */
|
||||
.poem-image::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--translucent);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.user-avatar:hover {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
/* 滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: rgba(73, 177, 245, 0.2);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #49b1f5;
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.4) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.4) 50%,
|
||||
rgba(255, 255, 255, 0.4) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.el-select-dropdown.el-popper ::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 选中样式 */
|
||||
::selection {
|
||||
background: var(--lightGreen);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* 居中 */
|
||||
.myCenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.transformCenter {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* 两边 */
|
||||
.myBetween {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 阴影 */
|
||||
.shadow-box-mini {
|
||||
box-shadow: 1px 1px 3px var(--mask);
|
||||
}
|
||||
|
||||
.shadow-box {
|
||||
box-shadow: 0 1px 20px -6px var(--borderColor);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.shadow-box:hover {
|
||||
box-shadow: 0 5px 10px 5px var(--borderHoverColor);
|
||||
}
|
||||
|
||||
/* el弹出框样式 */
|
||||
.el-message {
|
||||
top: 80px !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.el-message * {
|
||||
color: var(--white) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-message--success {
|
||||
background: var(--themeBackground);
|
||||
}
|
||||
|
||||
.el-message--warning {
|
||||
background: var(--gradientBG);
|
||||
}
|
||||
|
||||
.el-message--error {
|
||||
background: var(--gradualRed);
|
||||
}
|
||||
|
||||
/* 看板娘 */
|
||||
#waifu-toggle, #waifu {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#waifu-tips {
|
||||
border: unset;
|
||||
animation: unset;
|
||||
width: 200px;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
#waifu-tool {
|
||||
right: -10px;
|
||||
bottom: 20px;
|
||||
top: unset;
|
||||
}
|
||||
|
||||
#waifu #live2d {
|
||||
height: 250px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
/* 图标旋转 */
|
||||
.iconRotate {
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
/* 树洞留言 */
|
||||
.baberrage-item .baberrage-msg {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.baberrage-item .normal .baberrage-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
.el-upload.el-upload--picture, .el-upload.el-upload--text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100% !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.toolbarDrawer {
|
||||
position: relative;
|
||||
background: var(--toolbar) center center / cover no-repeat;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.toolbarDrawer .el-drawer__header {
|
||||
font-size: 22px;
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbarDrawer::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--maxMask);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.small-menu {
|
||||
color: var(--white);
|
||||
font-size: 20px;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.small-menu > li {
|
||||
list-style: none;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-tooltip__popper.is-light {
|
||||
background: var(--lightGreen);
|
||||
border-radius: 10px;
|
||||
color: var(--white);
|
||||
padding: 12px 20px;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
font-size: 1.2rem;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
.el-tooltip__popper .popper__arrow {
|
||||
border-style: unset;
|
||||
}
|
||||
|
||||
.message-index {
|
||||
z-index: 3000 !important;
|
||||
}
|
||||
|
||||
.article-copy .el-dialog {
|
||||
border-radius: 15px;
|
||||
margin-top: 5vh !important;
|
||||
}
|
||||
|
||||
.article-copy .el-dialog__body {
|
||||
padding: 15px 25px 30px;
|
||||
}
|
||||
|
||||
.index-push .el-dialog {
|
||||
border-radius: 15px;
|
||||
margin-top: 10vh !important;
|
||||
}
|
||||
|
||||
.index-push .el-dialog__title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.admin-content .pagination {
|
||||
overflow-y: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.el-dialog {
|
||||
width: 70% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.el-dialog {
|
||||
width: 80% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.el-dialog {
|
||||
width: 90% !important;
|
||||
}
|
||||
}
|
||||
380
src/assets/css/markdown-highlight.css
Normal file
380
src/assets/css/markdown-highlight.css
Normal file
@ -0,0 +1,380 @@
|
||||
/* markdown样式 */
|
||||
.entry-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.entry-content blockquote {
|
||||
margin: 0;
|
||||
padding: 15px 50px;
|
||||
position: relative;
|
||||
word-break: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.entry-content blockquote:before {
|
||||
content: "\f10d";
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: orange;
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
.entry-content blockquote:after {
|
||||
content: '\f10e';
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
color: orange;
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
.entry-content code:not(.hljs) {
|
||||
background: #fefac7;
|
||||
color: #e67474;
|
||||
word-break: break-word;
|
||||
padding: 4px 6px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.entry-content ul {
|
||||
list-style: disc;
|
||||
padding: 0 10px 0 35px;
|
||||
color: var(--articleGreyFontColor);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.entry-content ol {
|
||||
list-style: decimal;
|
||||
padding: 0 10px 0 35px;
|
||||
color: var(--articleGreyFontColor);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.entry-content ol li,
|
||||
.entry-content ul li {
|
||||
padding: 8px 0;
|
||||
Letter-spacing: 1px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.entry-content h3 {
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
}
|
||||
|
||||
.entry-content h1,
|
||||
.entry-content h2,
|
||||
.entry-content h2,
|
||||
.entry-content h3,
|
||||
.entry-content h4 {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.entry-content h2 {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.entry-content h3 {
|
||||
padding-left: 20px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.entry-content h4 {
|
||||
padding-left: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.entry-content h5 {
|
||||
font-size: 18px;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.entry-content h2:before {
|
||||
content: "🌺";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 1.03em;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.entry-content h3:before {
|
||||
content: "#";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
margin-top: 2px;
|
||||
color: #ff6d6d;
|
||||
}
|
||||
|
||||
.entry-content h4:before {
|
||||
content: "▌";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
color: #ff6d6d;
|
||||
}
|
||||
|
||||
.entry-content h5:before {
|
||||
content: "🌷";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.entry-content a {
|
||||
color: #e67474;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.entry-content a:hover {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.entry-content a:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transform: scaleX(0);
|
||||
height: 1.5px;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
background-color: orange;
|
||||
transform-origin: bottom right;
|
||||
transition: transform 0.25s ease-out;
|
||||
}
|
||||
|
||||
.entry-content a:hover:after {
|
||||
transform: scaleX(1);
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.entry-content p {
|
||||
color: var(--articleFontColor);
|
||||
line-height: 35px;
|
||||
word-break: break-word;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.entry-content hr {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 0.5px dashed #fc625d;
|
||||
}
|
||||
|
||||
.entry-content img {
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* 高亮代码块 */
|
||||
.highlight-wrap {
|
||||
position: relative;
|
||||
background: #21252b;
|
||||
border-radius: 5px;
|
||||
font: 15px/22px "Microsoft YaHei", "Arial";
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.6em;
|
||||
width: 100%;
|
||||
padding-top: 30px;
|
||||
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.highlight-wrap:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: #fc625d;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
left: 12px;
|
||||
margin-top: -18px;
|
||||
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.highlight-wrap .copy-code {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 5px;
|
||||
font-size: 16px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.highlight-wrap .copy-code:hover {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.highlight-wrap code::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.highlight-wrap code {
|
||||
word-break: break-word;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.highlight-wrap code[data-rel]:before {
|
||||
color: #fff;
|
||||
content: attr(data-rel);
|
||||
height: 30px;
|
||||
line-height: 23px;
|
||||
background: #21252b;
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: -30px;
|
||||
width: 100%;
|
||||
font-family: Ubuntu;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
color: #a9b7c6;
|
||||
background: #1d1f21;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.hljs-ln-line span::selection,
|
||||
.hljs-ln-line::selection {
|
||||
background: #fff;
|
||||
color: #21252b;
|
||||
}
|
||||
|
||||
.hljs-ln {
|
||||
margin: 6px 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hljs-ln-line.hljs-ln-code {
|
||||
padding-left: 25px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.hljs-ln-line.hljs-ln-code:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.hljs-ln-line.hljs-ln-numbers {
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
color: #888f96;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
background: #1d1f21;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #888f96;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-formula,
|
||||
.hljs-keyword {
|
||||
color: #c678dd;
|
||||
}
|
||||
|
||||
.hljs-deletion,
|
||||
.hljs-name,
|
||||
.hljs-section,
|
||||
.hljs-selector-tag,
|
||||
.hljs-subst {
|
||||
color: #e06c75;
|
||||
}
|
||||
|
||||
.hljs-literal {
|
||||
color: #56b6c2;
|
||||
}
|
||||
|
||||
.hljs-addition,
|
||||
.hljs-attribute,
|
||||
.hljs-meta-string,
|
||||
.hljs-regexp,
|
||||
.hljs-string {
|
||||
color: #98c379;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-class .hljs-title {
|
||||
color: #e6c07b;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-number,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-variable {
|
||||
color: #d19a66;
|
||||
}
|
||||
|
||||
.hljs-bullet,
|
||||
.hljs-link,
|
||||
.hljs-meta,
|
||||
.hljs-selector-id,
|
||||
.hljs-symbol,
|
||||
.hljs-title {
|
||||
color: #61aeee;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
/* 表格 */
|
||||
.table-wrapper::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.table-wrapper > table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-wrapper > table th {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.table-wrapper > table tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.table-wrapper > table td,
|
||||
.table-wrapper > table th {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #dfe2e5;
|
||||
line-height: 1.5;
|
||||
font-size: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-wrapper > table tbody > tr {
|
||||
transition: all 0.28s ease;
|
||||
}
|
||||
|
||||
.table-wrapper > table tbody > tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
76
src/assets/css/tocbot.css
Normal file
76
src/assets/css/tocbot.css
Normal file
@ -0,0 +1,76 @@
|
||||
.toc {
|
||||
width: 250px;
|
||||
position: fixed;
|
||||
top: calc(100vh / 4);
|
||||
right: 3vh;
|
||||
background: var(--commentContent);
|
||||
border-radius: 8px;
|
||||
z-index: 100;
|
||||
transition: all 1s;
|
||||
padding: 10px 10px 10px 5px;
|
||||
color: var(--maxGreyFont);
|
||||
}
|
||||
|
||||
.toc::before {
|
||||
content: '🏖️目录';
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
margin-left: 55px;
|
||||
}
|
||||
|
||||
.toc > .toc-list {
|
||||
overflow-y: scroll;
|
||||
max-height: 52vh;
|
||||
position: relative;
|
||||
padding-inline-start: 35px !important;
|
||||
padding-right: 5px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.toc > .toc-list::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.toc > .toc-list::-webkit-scrollbar-track {
|
||||
background-color: rgba(73, 177, 245, 0.2);
|
||||
}
|
||||
|
||||
.toc > .toc-list::-webkit-scrollbar-thumb {
|
||||
background-color: var(--lightGreen);
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.toc .toc-list {
|
||||
padding-inline-start: 25px;
|
||||
}
|
||||
|
||||
.toc a.toc-link {
|
||||
color: currentColor;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.toc .is-collapsible {
|
||||
max-height: 1000px;
|
||||
overflow: hidden;
|
||||
transition: all 300ms ease-in-out;
|
||||
}
|
||||
|
||||
.toc .is-collapsed {
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.toc .toc-link {
|
||||
margin: 4px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toc .is-active-link {
|
||||
font-weight: 700;
|
||||
color: var(--white) !important;
|
||||
background: var(--lightGreen);
|
||||
padding: 4px 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
BIN
src/assets/fonts/fontawesome-webfont.eot
Normal file
BIN
src/assets/fonts/fontawesome-webfont.eot
Normal file
Binary file not shown.
2671
src/assets/fonts/fontawesome-webfont.svg
Normal file
2671
src/assets/fonts/fontawesome-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
BIN
src/assets/fonts/fontawesome-webfont.ttf
Normal file
BIN
src/assets/fonts/fontawesome-webfont.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/fontawesome-webfont.woff
Normal file
BIN
src/assets/fonts/fontawesome-webfont.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/fontawesome-webfont.woff2
Normal file
BIN
src/assets/fonts/fontawesome-webfont.woff2
Normal file
Binary file not shown.
190
src/components/about.vue
Normal file
190
src/components/about.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 两句诗 -->
|
||||
<div class="my-animation-slide-top">
|
||||
<twoPoem :isHitokoto="false"></twoPoem>
|
||||
</div>
|
||||
|
||||
<div style="background: var(--background)" class="my-animation-slide-bottom">
|
||||
<div class="about-wrap">
|
||||
<h1 style="font-size: 40px;font-weight: 500;letter-spacing: 5px;">两只毛驴鸣翠柳</h1>
|
||||
<!-- 对话框 -->
|
||||
<div class="about-box">
|
||||
<h4>与 {{$store.state.webInfo.webName}} 对话中...</h4>
|
||||
<div v-if="sayShow" id="say-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<myFooter></myFooter>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const twoPoem = () => import( "./common/twoPoem");
|
||||
const myFooter = () => import( "./common/myFooter");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
twoPoem,
|
||||
myFooter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sayShow: false,
|
||||
sayContent: [
|
||||
{
|
||||
"talk": ["Hi, there👋", "这是一个 Vue2 Vue3 与 SpringBoot 结合的产物~"],
|
||||
"reply": ["然后呢？ 😃", "少废话！ 🙄"]
|
||||
}, {
|
||||
"talk": ["😘",
|
||||
"本站平时仅用于交流和学习新知识",
|
||||
"如涉及侵权请联系站长删除对应资源，谢谢！！！"],
|
||||
"reply": ["这个网站有什么用吗？ 😂"]
|
||||
}, {
|
||||
"talk": ["拥有自己的独立网站难道不酷吗🚀",
|
||||
"那就摸鱼吧👋",
|
||||
"摸鱼大军请在聊天室集合🥝"],
|
||||
"reply": []
|
||||
}
|
||||
],
|
||||
sayIndex: 0
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
this.sayShow = true;
|
||||
this.say();
|
||||
}, 2000);
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
answer(index, value) {
|
||||
$(".say-select").remove();
|
||||
|
||||
let htmlStr = `<div class="say-right my-animation-slide-bottom"><span class="say-item-right">${value}</span></div>`;
|
||||
let frag = document.createRange().createContextualFragment(htmlStr);
|
||||
document.getElementById("say-container").appendChild(frag);
|
||||
if (index === 0) {
|
||||
setTimeout(() => {
|
||||
this.say();
|
||||
}, 500);
|
||||
} else {
|
||||
let htmlStr = `<div class="say-left my-animation-slide-bottom"><span class="say-item-left">👋 👋 👋</span></div>`;
|
||||
let frag = document.createRange().createContextualFragment(htmlStr);
|
||||
document.getElementById("say-container").appendChild(frag);
|
||||
}
|
||||
},
|
||||
say() {
|
||||
if (!this.$common.isEmpty(this.sayContent[this.sayIndex]) && !this.$common.isEmpty(this.sayContent[this.sayIndex].talk)) {
|
||||
this.sayContent[this.sayIndex].talk.forEach((value, index, talk) => {
|
||||
setTimeout(() => {
|
||||
let htmlStr = `<div class="say-left my-animation-slide-bottom"><span class="say-item-left">${value}</span></div>`;
|
||||
let frag = document.createRange().createContextualFragment(htmlStr);
|
||||
document.getElementById("say-container").appendChild(frag);
|
||||
if (talk.length === index + 1) {
|
||||
if (!this.$common.isEmpty(this.sayContent[this.sayIndex].reply)) {
|
||||
setTimeout(() => {
|
||||
if (this.sayContent[this.sayIndex].reply.length === 2) {
|
||||
let reply0 = this.sayContent[this.sayIndex].reply[0];
|
||||
let reply1 = this.sayContent[this.sayIndex].reply[1];
|
||||
let htmlStr = `<div class="say-left my-animation-slide-bottom"><span class="say-select">${reply0}</span><span class="say-select">${reply1}</span></div>`;
|
||||
let frag = document.createRange().createContextualFragment(htmlStr);
|
||||
document.getElementById("say-container").appendChild(frag);
|
||||
document.getElementsByClassName("say-select")[0].onclick = () => {
|
||||
this.answer(0, reply0);
|
||||
}
|
||||
document.getElementsByClassName("say-select")[1].onclick = () => {
|
||||
this.answer(1, reply1);
|
||||
}
|
||||
} else if (this.sayContent[this.sayIndex].reply.length === 1) {
|
||||
let reply0 = this.sayContent[this.sayIndex].reply[0];
|
||||
let htmlStr = `<div class="say-left my-animation-slide-bottom"><span class="say-select">${reply0}</span></div>`;
|
||||
let frag = document.createRange().createContextualFragment(htmlStr);
|
||||
document.getElementById("say-container").appendChild(frag);
|
||||
document.getElementsByClassName("say-select")[0].onclick = () => {
|
||||
this.answer(0, reply0);
|
||||
}
|
||||
}
|
||||
this.sayIndex += 1;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}, index * 500);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.about-wrap {
|
||||
text-align: center;
|
||||
width: 95%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px 80px;
|
||||
}
|
||||
|
||||
.about-box {
|
||||
min-height: 450px;
|
||||
padding: 5px;
|
||||
background-color: var(--maxMaxLightGray);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.say-item-left {
|
||||
padding: 5px 12px;
|
||||
border-radius: 1rem;
|
||||
color: var(--maxGreyFont);
|
||||
background-color: var(--lightGray);
|
||||
}
|
||||
|
||||
.say-item-right {
|
||||
padding: 5px 12px;
|
||||
border-radius: 1rem;
|
||||
color: var(--white);
|
||||
background-color: var(--translucent);
|
||||
}
|
||||
|
||||
.say-left {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.say-right {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.say-select {
|
||||
cursor: pointer;
|
||||
background: var(--black);
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
margin-right: 12px;
|
||||
margin-top: 20px;
|
||||
color: var(--white);
|
||||
border: 1px solid var(--black);
|
||||
}
|
||||
|
||||
.say-select:hover {
|
||||
border: 1px solid var(--themeBackground);
|
||||
color: var(--themeBackground);
|
||||
box-shadow: 0 0 5px var(--themeBackground);
|
||||
}
|
||||
</style>
|
||||
73
src/components/admin/admin.vue
Normal file
73
src/components/admin/admin.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div>
|
||||
<myHeader></myHeader>
|
||||
<sidebar></sidebar>
|
||||
<div class="content-box">
|
||||
<div class="admin-content">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myHeader from "./common/myHeader.vue";
|
||||
import sidebar from "./common/sidebar.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
myHeader,
|
||||
sidebar
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
let sysConfig = this.$store.state.sysConfig;
|
||||
if (!this.$common.isEmpty(sysConfig) && !this.$common.isEmpty(sysConfig['webStaticResourcePrefix'])) {
|
||||
let webStaticResourcePrefix = sysConfig['webStaticResourcePrefix'];
|
||||
const font = new FontFace("poetize-font", "url(" + webStaticResourcePrefix + "assets/font.woff2)");
|
||||
font.load();
|
||||
document.fonts.add(font);
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.content-box {
|
||||
position: absolute;
|
||||
left: 130px;
|
||||
right: 0;
|
||||
top: 70px;
|
||||
bottom: 0;
|
||||
transition: left .3s ease-in-out;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
.admin-content {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
162
src/components/admin/commentList.vue
Normal file
162
src/components/admin/commentList.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom: 20px">
|
||||
<el-select v-if="isBoss" v-model="pagination.commentType" placeholder="评论来源类型" style="margin-right: 10px;margin-bottom: 10px">
|
||||
<el-option key="1" label="文章评论" value="article"></el-option>
|
||||
<el-option key="2" label="树洞留言" value="message"></el-option>
|
||||
<el-option key="3" label="家庭祝福" value="love"></el-option>
|
||||
<el-option key="4" label="随笔评论" value="jotting"></el-option>
|
||||
</el-select>
|
||||
<el-input class="my-input" type="number" style="width: 140px;margin-right: 10px;margin-bottom: 10px" v-model="pagination.source"
|
||||
placeholder="评论来源标识"></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="searchComments()">搜索</el-button>
|
||||
<el-button type="danger" @click="clearSearch()">清除参数</el-button>
|
||||
</div>
|
||||
<el-table :data="comments" border class="table" header-cell-class-name="table-header">
|
||||
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||
<el-table-column prop="source" label="评论来源标识" align="center"></el-table-column>
|
||||
<el-table-column prop="type" label="评论来源类型" align="center"></el-table-column>
|
||||
<el-table-column prop="userId" label="发表用户ID" align="center"></el-table-column>
|
||||
<el-table-column prop="likeCount" label="点赞数" align="center"></el-table-column>
|
||||
<el-table-column prop="commentContent" label="评论内容" align="center"></el-table-column>
|
||||
<el-table-column prop="commentInfo" label="评论额外信息" align="center"></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)" @click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination background layout="total, prev, pager, next"
|
||||
:pager-count="5"
|
||||
:current-page="pagination.current"
|
||||
:page-size="pagination.size"
|
||||
:total="pagination.total"
|
||||
@current-change="handlePageChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isBoss: this.$store.state.currentAdmin.isBoss,
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
source: null,
|
||||
commentType: ""
|
||||
},
|
||||
comments: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getComments();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
clearSearch() {
|
||||
this.pagination = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
source: null,
|
||||
commentType: ""
|
||||
}
|
||||
this.getComments();
|
||||
},
|
||||
getComments() {
|
||||
let url = "";
|
||||
if (this.isBoss) {
|
||||
url = "/admin/comment/boss/list";
|
||||
} else {
|
||||
url = "/admin/comment/user/list";
|
||||
}
|
||||
this.$http.post(this.$constant.baseURL + url, this.pagination, true)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.comments = res.data.records;
|
||||
this.pagination.total = res.data.total;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
handlePageChange(val) {
|
||||
this.pagination.current = val;
|
||||
this.getComments();
|
||||
},
|
||||
searchComments() {
|
||||
this.pagination.total = 0;
|
||||
this.pagination.current = 1;
|
||||
this.getComments();
|
||||
},
|
||||
handleDelete(item) {
|
||||
let url = "";
|
||||
if (this.isBoss) {
|
||||
url = "/admin/comment/boss/deleteComment";
|
||||
} else {
|
||||
url = "/admin/comment/user/deleteComment";
|
||||
}
|
||||
this.$confirm('删除评论后，所有该评论的回复均不可见。确认删除？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.get(this.$constant.baseURL + url, {id: item.id}, true)
|
||||
.then((res) => {
|
||||
this.pagination.current = 1;
|
||||
this.getComments();
|
||||
this.$message({
|
||||
message: "删除成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消删除!'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.pagination {
|
||||
margin: 20px 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.my-input >>> input::-webkit-inner-spin-button {
|
||||
appearance: none;
|
||||
}
|
||||
</style>
|
||||
113
src/components/admin/common/myHeader.vue
Normal file
113
src/components/admin/common/myHeader.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="my-header myBetween">
|
||||
<div class="logo">后台管理</div>
|
||||
<div class="header-right">
|
||||
<div class="admin-index" @click="$router.push({path: '/'})">
|
||||
<svg viewBox="0 0 1024 1024" width="25" height="25" style="vertical-align: -6px;">
|
||||
<path d="M221.4 152.6h141.8V396h-141.8V152.6z" fill="#FAD996"></path>
|
||||
<path
|
||||
d="M363.4 152.6c-9-16.6-138.2-14.2-142 0-3 11.4-23.6 287 15.8 182.4 10.4-27.4 22.6-47.6 37.2-78.6 10.6-22.6 22-42.4 32.6-54.4 16.6-18.6 18 9.6 33.6 22.6 41.6 34.4 31.8-55.6 22.8-72z"
|
||||
fill="#F9F8F7"></path>
|
||||
<path
|
||||
d="M834.2 851c0 24.8-20.2 45-45 45H234.8c-24.8 0-45-20.2-45-45v-370h1.2l321.2-270 321.2 270h0.6l0.2 370z"
|
||||
fill="#FAD996"></path>
|
||||
<path d="M833.4 481l-321.2-270-1.8 1.6V896h278.8c24.8 0 45-20.2 45-45l-0.2-370h-0.6z"
|
||||
fill="#F7C872"></path>
|
||||
<path
|
||||
d="M62 548L432.6 166.2s81.2-90.6 171.8 0c79 79 343.6 400 343.6 400s-55.4 41-125.2 14.2c-37.8-14.4-118.2-68-133.4-150.8-11-60.2-45.8 29-60.8-38.2-9.4-42.2-67.2-96.6-67.2-96.6s-48.4-55.4-100.2 0c-13.8 14.8-11.4 134.6-44 128-26.4-5.2-20-105.6-27-81.2-9.6 33-25 61-54.4 47.2-33.2-15.6-42.4 79.6-64.8 112.8-17.2 25.4-23.8-45.8-40.4-29.2-21.2 21-2.4 94-39.4 108s-132.8-2-129.2-32.4z"
|
||||
fill="#F9F8F7"></path>
|
||||
<path
|
||||
d="M512 126.2v144c28.8 1 49.4 24.6 49.4 24.6s57.8 54.4 67.2 96.6c15 67.2 49.8-22 60.8 38.2 15.2 82.8 95.6 136.4 133.4 150.8 69.8 26.8 125.2-14.2 125.2-14.2s-264.6-321-343.6-400c-33.2-33.2-65.2-42-92.4-40z"
|
||||
fill="#EFEBE8"></path>
|
||||
<path d="M405.2 495h99.8v99.8h-99.8v-99.8zM405.2 609.2h99.8v99.8h-99.8v-99.8z" fill="#FB8A5D"></path>
|
||||
<path d="M519 495h99.8v99.8h-99.8v-99.8zM519 609.2h99.8v99.8h-99.8v-99.8z" fill="#EA6D4B"></path>
|
||||
</svg>
|
||||
<span> 首页</span>
|
||||
</div>
|
||||
<div class="header-user-con">
|
||||
<el-dropdown placement="bottom">
|
||||
<el-avatar class="user-avatar" :size="40"
|
||||
:src="$store.state.currentAdmin.avatar">
|
||||
</el-avatar>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="logout()">退出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
logout() {
|
||||
this.$http.get(this.$constant.baseURL + "/user/logout", {}, true)
|
||||
.then((res) => {
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
this.$store.commit("loadCurrentAdmin", {});
|
||||
localStorage.removeItem("adminToken");
|
||||
this.$router.push({path: '/'});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.my-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
color: black;
|
||||
background-color: #ebf1f6;
|
||||
}
|
||||
|
||||
.my-header .logo {
|
||||
line-height: 70px;
|
||||
margin-left: 70PX;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.admin-index {
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
font-size: 15px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-user-con {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
166
src/components/admin/common/sidebar.vue
Normal file
166
src/components/admin/common/sidebar.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<div @click="collapse()" style="color: rgb(96, 98, 102);cursor: pointer;background-color: #ebf1f6;display: flex">
|
||||
<i class="el-icon-menu" style="margin: 14px;font-size: 17px"></i>
|
||||
<div style="font-size: 15px;margin-top: 13px">折叠</div>
|
||||
</div>
|
||||
<el-menu class="sidebar-el-menu"
|
||||
background-color="#ebf1f6"
|
||||
text-color="#606266"
|
||||
active-text-color="#20a0ff"
|
||||
unique-opened
|
||||
:default-active="$router.currentRoute.path"
|
||||
router>
|
||||
<template v-for="item in items">
|
||||
<template v-if="isBoss || !item.isBoss">
|
||||
<template v-if="item.subs">
|
||||
<el-submenu :index="item.index" :key="item.index">
|
||||
<template slot="title">
|
||||
<i :class="item.icon"></i>
|
||||
<span>{{ item.title }}</span>
|
||||
</template>
|
||||
<template v-for="subItem in item.subs">
|
||||
<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
|
||||
<template slot="title">
|
||||
{{ subItem.title }}
|
||||
</template>
|
||||
<el-menu-item v-for="threeItem in subItem.subs" :key="threeItem.index" :index="threeItem.index">
|
||||
{{ threeItem.title }}
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item v-else :index="subItem.index" :key="subItem.index">
|
||||
{{ subItem.title }}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-menu-item :index="item.index" :key="item.index">
|
||||
<i :class="item.icon"></i>
|
||||
{{ item.title }}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isCollapse: this.$common.mobile(),
|
||||
isBoss: this.$store.state.currentAdmin.isBoss,
|
||||
items: [{
|
||||
icon: "el-icon-s-home",
|
||||
index: "/main",
|
||||
title: "系统首页",
|
||||
isBoss: true
|
||||
}, {
|
||||
icon: "el-icon-s-tools",
|
||||
index: "/webEdit",
|
||||
title: "网站设置",
|
||||
isBoss: true
|
||||
}, {
|
||||
icon: "el-icon-user-solid",
|
||||
index: "/userList",
|
||||
title: "用户管理",
|
||||
isBoss: true
|
||||
}, {
|
||||
icon: "el-icon-postcard",
|
||||
index: "/postList",
|
||||
title: "文章管理",
|
||||
isBoss: false
|
||||
}, {
|
||||
icon: "el-icon-notebook-2",
|
||||
index: "/sortList",
|
||||
title: "分类管理",
|
||||
isBoss: true
|
||||
}, {
|
||||
icon: "el-icon-notebook-1",
|
||||
index: "/configList",
|
||||
title: "配置管理",
|
||||
isBoss: true
|
||||
}, {
|
||||
icon: "el-icon-edit-outline",
|
||||
index: "/commentList",
|
||||
title: "评论管理",
|
||||
isBoss: false
|
||||
}, {
|
||||
icon: "el-icon-s-comment",
|
||||
index: "/treeHoleList",
|
||||
title: "留言管理",
|
||||
isBoss: true
|
||||
}, {
|
||||
icon: "el-icon-paperclip",
|
||||
index: "/resourceList",
|
||||
title: "资源管理",
|
||||
isBoss: true
|
||||
}, {
|
||||
icon: "el-icon-bank-card",
|
||||
index: "/resourcePathList",
|
||||
title: "资源聚合",
|
||||
isBoss: true
|
||||
}, {
|
||||
icon: "el-icon-sugar",
|
||||
index: "/loveList",
|
||||
title: "表白墙",
|
||||
isBoss: true
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.collapse();
|
||||
},
|
||||
|
||||
methods: {
|
||||
collapse() {
|
||||
if (this.isCollapse) {
|
||||
$(".sidebar").css("width", "44px");
|
||||
$(".content-box").css("left", "44px");
|
||||
} else {
|
||||
$(".sidebar").css("width", "130px");
|
||||
$(".content-box").css("left", "130px");
|
||||
}
|
||||
this.isCollapse = !this.isCollapse;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.sidebar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 70px;
|
||||
bottom: 0;
|
||||
overflow-y: scroll;
|
||||
width: 130px;
|
||||
user-select: none;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.sidebar > ul {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar-el-menu .el-menu-item {
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
</style>
|
||||
206
src/components/admin/configList.vue
Normal file
206
src/components/admin/configList.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom: 20px">
|
||||
<el-button type="primary" @click="configDialog = true">新增配置</el-button>
|
||||
</div>
|
||||
<el-table :data="configList" height="75vh" border class="table" header-cell-class-name="table-header">
|
||||
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||
<el-table-column prop="configName" label="名称" align="center"></el-table-column>
|
||||
<el-table-column prop="configKey" label="键名" align="center"></el-table-column>
|
||||
<el-table-column prop="configValue" label="键值" align="center"></el-table-column>
|
||||
<el-table-column label="类型" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.configType === '1'">私有</span>
|
||||
<span v-else-if="scope.row.configType === '2'">公开</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-edit" @click="editConfig(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)"
|
||||
@click="deleteHandle(scope.row.id)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog title="配置"
|
||||
:visible.sync="configDialog"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
:append-to-body="true"
|
||||
destroy-on-close
|
||||
center>
|
||||
<div class="my-dialog">
|
||||
<div class="myCenter">
|
||||
<el-radio-group v-model="config.configType">
|
||||
<el-radio-button label="1">私有</el-radio-button>
|
||||
<el-radio-button label="2">公开</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<el-input placeholder="请输入名称" v-model="config.configName">
|
||||
<template slot="prepend">名称</template>
|
||||
</el-input>
|
||||
<el-input placeholder="请输入键名" v-model="config.configKey">
|
||||
<template slot="prepend">键名</template>
|
||||
</el-input>
|
||||
<el-input placeholder="请输入键值" v-model="config.configValue">
|
||||
<template slot="prepend">键值</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose()">取 消</el-button>
|
||||
<el-button type="primary" @click="saveOrEditConfig()">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
configDialog: false,
|
||||
configList: [],
|
||||
config: {
|
||||
id: null,
|
||||
configName: "",
|
||||
configKey: "",
|
||||
configValue: "",
|
||||
configType: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getConfigInfo();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
deleteHandle(id) {
|
||||
this.$confirm('确认删除？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.get(this.$constant.baseURL + "/sysConfig/deleteConfig", {id: id}, true)
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
message: "删除成功！",
|
||||
type: "success"
|
||||
});
|
||||
this.getConfigInfo();
|
||||
this.handleClose();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消删除!'
|
||||
});
|
||||
});
|
||||
},
|
||||
saveOrEditConfig() {
|
||||
if (this.$common.isEmpty(this.config.configName) ||
|
||||
this.$common.isEmpty(this.config.configKey) ||
|
||||
this.$common.isEmpty(this.config.configType)) {
|
||||
this.$message({
|
||||
message: "请完善所有配置信息！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.$confirm('编辑后需要重启POETIZE服务，确认编辑？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.post(this.$constant.baseURL + "/sysConfig/saveOrUpdateConfig", this.config, true)
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
message: "保存成功！",
|
||||
type: "success"
|
||||
});
|
||||
this.getConfigInfo();
|
||||
this.handleClose();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消编辑!'
|
||||
});
|
||||
});
|
||||
},
|
||||
editConfig(config) {
|
||||
this.configDialog = true;
|
||||
this.config.id = config.id;
|
||||
this.config.configName = config.configName;
|
||||
this.config.configKey = config.configKey;
|
||||
this.config.configValue = config.configValue;
|
||||
this.config.configType = config.configType;
|
||||
},
|
||||
handleClose() {
|
||||
this.config = {
|
||||
id: null,
|
||||
configName: "",
|
||||
configKey: "",
|
||||
configValue: "",
|
||||
configType: ""
|
||||
};
|
||||
this.configDialog = false;
|
||||
},
|
||||
getConfigInfo() {
|
||||
this.$http.get(this.$constant.baseURL + "/sysConfig/listConfig", {}, true)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.configList = res.data;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.my-dialog > div {
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.my-dialog >>> input::-webkit-inner-spin-button {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
213
src/components/admin/loveList.vue
Normal file
213
src/components/admin/loveList.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="handle-box">
|
||||
<el-select clearable v-model="pagination.status" placeholder="状态" class="handle-select mrb10">
|
||||
<el-option key="1" label="启用" :value="true"></el-option>
|
||||
<el-option key="2" label="禁用" :value="false"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
|
||||
</div>
|
||||
<el-table :data="loves" border class="table" header-cell-class-name="table-header">
|
||||
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||
<el-table-column prop="userId" label="用户ID" align="center"></el-table-column>
|
||||
|
||||
<el-table-column prop="manName" label="男生昵称" align="center"></el-table-column>
|
||||
<el-table-column prop="womanName" label="女生昵称" align="center"></el-table-column>
|
||||
|
||||
<el-table-column label="背景封面" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-image lazy :preview-src-list="[scope.row.bgCover]" class="table-td-thumb" :src="scope.row.bgCover"
|
||||
fit="cover"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="男生头像" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-image lazy :preview-src-list="[scope.row.manCover]" class="table-td-thumb" :src="scope.row.manCover"
|
||||
fit="cover"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="女生头像" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-image lazy :preview-src-list="[scope.row.womanCover]" class="table-td-thumb" :src="scope.row.womanCover"
|
||||
fit="cover"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status === false ? 'danger' : 'success'"
|
||||
disable-transitions>
|
||||
{{scope.row.status === false ? '禁用' : '启用'}}
|
||||
</el-tag>
|
||||
<el-switch @click.native="changeStatus(scope.row)" v-model="scope.row.status"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="timing" label="计时" align="center"></el-table-column>
|
||||
<el-table-column prop="countdownTitle" label="倒计时标题" align="center"></el-table-column>
|
||||
<el-table-column prop="countdownTime" label="倒计时时间" align="center"></el-table-column>
|
||||
<el-table-column prop="familyInfo" label="额外信息" align="center" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||||
<el-table-column prop="updateTime" label="最终修改时间" align="center"></el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination background layout="total, prev, pager, next"
|
||||
:pager-count="5"
|
||||
:current-page="pagination.current"
|
||||
:page-size="pagination.size"
|
||||
:total="pagination.total"
|
||||
@current-change="handlePageChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
status: null
|
||||
},
|
||||
loves: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getLoves();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleDelete(item) {
|
||||
this.$confirm('确认删除资源？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.get(this.$constant.baseURL + "/family/deleteFamily", {id: item.id}, true)
|
||||
.then((res) => {
|
||||
this.pagination.current = 1;
|
||||
this.getLoves();
|
||||
this.$message({
|
||||
message: "删除成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消删除!'
|
||||
});
|
||||
});
|
||||
},
|
||||
search() {
|
||||
this.pagination.total = 0;
|
||||
this.pagination.current = 1;
|
||||
this.getLoves();
|
||||
},
|
||||
getLoves() {
|
||||
this.$http.post(this.$constant.baseURL + "/family/listFamily", this.pagination, true)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.loves = res.data.records;
|
||||
this.pagination.total = res.data.total;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
changeStatus(item) {
|
||||
this.$http.get(this.$constant.baseURL + "/family/changeLoveStatus", {
|
||||
id: item.id,
|
||||
flag: item.status
|
||||
}, true)
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
message: "修改成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
handlePageChange(val) {
|
||||
this.pagination.current = val;
|
||||
this.getLoves();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.handle-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.handle-select {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mrb10 {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.table-td-thumb {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 20px 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.el-switch {
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
282
src/components/admin/main.vue
Normal file
282
src/components/admin/main.vue
Normal file
@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-tag effect="dark" class="my-tag">
|
||||
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
|
||||
<path
|
||||
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||
fill="#8C7BFD"></path>
|
||||
<path
|
||||
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||
fill="#FFE37B"></path>
|
||||
</svg>
|
||||
统计信息
|
||||
</el-tag>
|
||||
|
||||
<!-- 总览 -->
|
||||
<div>
|
||||
<div class="history-title">总览</div>
|
||||
<div>
|
||||
<div style="margin: 0 auto;display: flex;justify-content: center">
|
||||
<div class="history-name" style="line-height: 35px">总访问量:</div>
|
||||
<div style="color:var(--maxLightRed);font-weight: bold;font-size: 30px;line-height: 35px">
|
||||
{{historyInfo.ip_history_count}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="myCenter">
|
||||
<div class="history-info">
|
||||
<div>
|
||||
<div class="history-name" style="margin-top: 15px">省份访问TOP10</div>
|
||||
<div>
|
||||
<el-table :data="historyInfo.ip_history_province">
|
||||
<el-table-column
|
||||
type="index"
|
||||
align="center"
|
||||
width="60">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="省份"
|
||||
width="140">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="num"
|
||||
align="center"
|
||||
label="数量"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="history-name" style="margin-top: 15px">IP访问TOP10</div>
|
||||
<div>
|
||||
<el-table :data="historyInfo.ip_history_ip">
|
||||
<el-table-column
|
||||
type="index"
|
||||
align="center"
|
||||
width="60">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ip"
|
||||
align="center"
|
||||
label="IP"
|
||||
width="140">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="num"
|
||||
align="center"
|
||||
label="数量"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 今日访问 -->
|
||||
<div>
|
||||
<div class="history-title">今日访问</div>
|
||||
<div class="myCenter">
|
||||
<div>
|
||||
<div style="margin: 0 auto;display: flex;justify-content: center">
|
||||
<div class="history-name" style="line-height: 35px">今日访问量：</div>
|
||||
<div style="color:var(--maxLightRed);font-weight: bold;font-size: 30px;line-height: 35px">
|
||||
{{historyInfo.ip_count_today}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="history-info">
|
||||
<div>
|
||||
<div class="history-name" style="margin-top: 15px">今日访问省份统计</div>
|
||||
<div>
|
||||
<el-table :data="historyInfo.province_today">
|
||||
<el-table-column
|
||||
type="index"
|
||||
align="center"
|
||||
width="60">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="province"
|
||||
align="center"
|
||||
label="省份"
|
||||
width="140">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="num"
|
||||
align="center"
|
||||
label="数量"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="history-name" style="margin-top: 15px">今日访问用户</div>
|
||||
<div class="history-avatar">
|
||||
<el-table :data="historyInfo.username_today">
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="头像"
|
||||
width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-avatar class="user-avatar" :size="30"
|
||||
:src="scope.row.avatar">
|
||||
</el-avatar>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="username"
|
||||
align="center"
|
||||
label="用户"
|
||||
width="200">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 昨日访问 -->
|
||||
<div>
|
||||
<div class="history-title">昨日访问</div>
|
||||
<div>
|
||||
<div style="margin: 0 auto;display: flex;justify-content: center">
|
||||
<div class="history-name" style="line-height: 35px">昨日访问量：</div>
|
||||
<div style="color:var(--maxLightRed);font-weight: bold;font-size: 30px;line-height: 35px">
|
||||
{{historyInfo.ip_count_yest}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="myCenter">
|
||||
<div class="history-info">
|
||||
<div>
|
||||
<div class="history-name">昨日访问用户</div>
|
||||
<div class="history-avatar">
|
||||
<el-table :data="historyInfo.username_yest">
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="头像"
|
||||
width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-avatar class="user-avatar" :size="30"
|
||||
:src="scope.row.avatar">
|
||||
</el-avatar>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="username"
|
||||
align="center"
|
||||
label="用户"
|
||||
width="200">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
historyInfo: {}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getHistoryInfo();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
getHistoryInfo() {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/getHistoryInfo", {}, true)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.historyInfo = res.data;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.my-tag {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: var(--lightYellow);
|
||||
border: none;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.history-title {
|
||||
margin: 15px auto 15px;
|
||||
text-align: center;
|
||||
padding: 10px 20px;
|
||||
background: var(--lightGreen);
|
||||
color: var(--white);
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.history-name {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin: 0 10px 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.history-info {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.history-info >>> .el-table .cell {
|
||||
line-height: unset;
|
||||
}
|
||||
|
||||
.history-avatar >>> .el-table .el-table__row .el-table__cell {
|
||||
padding: 3.5px 0;
|
||||
}
|
||||
|
||||
.history-info >>> .el-table::before {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.history-info {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
389
src/components/admin/postEdit.vue
Normal file
389
src/components/admin/postEdit.vue
Normal file
@ -0,0 +1,389 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tag effect="dark" class="my-tag">
|
||||
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
|
||||
<path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01"></path>
|
||||
<path
|
||||
d="M682.666667 204.8h238.933333a34.133333 34.133333 0 0 1 34.133333 34.133333v648.533334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V204.8z"
|
||||
fill="#FFAA44"></path>
|
||||
<path
|
||||
d="M68.266667 921.6a34.133333 34.133333 0 0 0 34.133333 34.133333h785.066667a68.266667 68.266667 0 0 1-68.266667-68.266666V102.4a34.133333 34.133333 0 0 0-34.133333-34.133333H102.4a34.133333 34.133333 0 0 0-34.133333 34.133333v819.2z"
|
||||
fill="#11AA66"></path>
|
||||
<path
|
||||
d="M238.933333 307.2a34.133333 34.133333 0 0 0 0 68.266667h136.533334a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h409.6a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h204.8a34.133333 34.133333 0 1 0 0-68.266667H238.933333z"
|
||||
fill="#FFFFFF"></path>
|
||||
</svg>
|
||||
文章信息
|
||||
</el-tag>
|
||||
<el-form :model="article" :rules="rules" ref="ruleForm" label-width="80px"
|
||||
class="demo-ruleForm">
|
||||
<el-form-item label="标题" prop="articleTitle">
|
||||
<el-input maxlength="30" v-model="article.articleTitle"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="视频链接" prop="videoUrl">
|
||||
<el-input maxlength="1000" v-model="article.videoUrl"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label-width="auto" prop="articleContent">
|
||||
<mavon-editor ref="md" @imgAdd="imgAdd" v-model="article.articleContent"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="启用评论" prop="commentStatus">
|
||||
<el-tag :type="article.commentStatus === false ? 'danger' : 'success'"
|
||||
disable-transitions>
|
||||
{{article.commentStatus === false ? '否' : '是'}}
|
||||
</el-tag>
|
||||
<el-switch v-model="article.commentStatus"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否推荐" prop="recommendStatus">
|
||||
<el-tag :type="article.recommendStatus === false ? 'danger' : 'success'"
|
||||
disable-transitions>
|
||||
{{article.recommendStatus === false ? '否' : '是'}}
|
||||
</el-tag>
|
||||
<el-switch v-model="article.recommendStatus"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="访问类型" prop="viewType">
|
||||
<el-select v-model="article.viewType" placeholder="访问类型" style="width: 120px">
|
||||
<el-option key="1" label="公开" value="public"></el-option>
|
||||
<el-option key="2" label="登录" value="login"></el-option>
|
||||
<el-option key="3" label="用户等级" value="userLv"></el-option>
|
||||
<el-option key="4" label="密码" value="password"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="!$common.isEmpty(article.viewType) && article.viewType !== 'public' && article.viewType !== 'login'" label="访问条件" prop="viewValue">
|
||||
<template v-if="article.viewType === 'userLv'">
|
||||
<el-select v-model="article.viewValue" placeholder="用户等级" style="width: 120px">
|
||||
<el-option key="1" label="VIP1" value="1"></el-option>
|
||||
<el-option key="2" label="VIP2" value="2"></el-option>
|
||||
<el-option key="3" label="VIP3" value="3"></el-option>
|
||||
<el-option key="4" label="VIP4" value="4"></el-option>
|
||||
<el-option key="5" label="VIP5" value="5"></el-option>
|
||||
<el-option key="6" label="VIP6" value="6"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else-if="article.viewType === 'password'">
|
||||
<el-input maxlength="30" v-model="article.viewValue"></el-input>
|
||||
</template>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="!$common.isEmpty(article.viewType) && article.viewType !== 'public' && article.viewType !== 'login'" label="提示" prop="tips">
|
||||
<el-input maxlength="100" v-model="article.tips"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="封面" prop="articleCover">
|
||||
<div style="display: flex">
|
||||
<el-input v-model="article.articleCover"></el-input>
|
||||
<el-image class="table-td-thumb"
|
||||
lazy
|
||||
style="margin-left: 10px"
|
||||
:preview-src-list="[article.articleCover]"
|
||||
:src="article.articleCover"
|
||||
fit="cover"></el-image>
|
||||
</div>
|
||||
<uploadPicture :isAdmin="true" :prefix="'articleCover'" style="margin-top: 10px" @addPicture="addArticleCover"
|
||||
:maxSize="2"
|
||||
:maxNumber="1"></uploadPicture>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类" prop="sortId">
|
||||
<el-select v-model="article.sortId" placeholder="请选择分类">
|
||||
<el-option
|
||||
v-for="item in sorts"
|
||||
:key="item.id"
|
||||
:label="item.sortName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="labelId">
|
||||
<el-select v-model="article.labelId" placeholder="请选择标签">
|
||||
<el-option
|
||||
v-for="item in labelsTemp"
|
||||
:key="item.id"
|
||||
:label="item.labelName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="myCenter" style="margin-bottom: 22px">
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
|
||||
<el-button type="danger" @click="resetForm('ruleForm')">重置所有修改</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const uploadPicture = () => import( "../common/uploadPicture");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uploadPicture
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: this.$route.query.id,
|
||||
article: {
|
||||
articleTitle: "",
|
||||
articleContent: "",
|
||||
commentStatus: true,
|
||||
recommendStatus: false,
|
||||
viewType: "",
|
||||
viewValue: "",
|
||||
tips: "",
|
||||
articleCover: "",
|
||||
videoUrl: "",
|
||||
sortId: null,
|
||||
labelId: null
|
||||
},
|
||||
sorts: [],
|
||||
labels: [],
|
||||
labelsTemp: [],
|
||||
rules: {
|
||||
articleTitle: [
|
||||
{required: true, message: '请输入标题', trigger: 'change'}
|
||||
],
|
||||
articleContent: [
|
||||
{required: true, message: '请输入内容', trigger: 'change'}
|
||||
],
|
||||
commentStatus: [
|
||||
{required: true, message: '是否启用评论', trigger: 'change'}
|
||||
],
|
||||
recommendStatus: [
|
||||
{required: true, message: '是否推荐', trigger: 'change'}
|
||||
],
|
||||
viewType: [
|
||||
{required: true, message: '访问类型', trigger: 'change'}
|
||||
],
|
||||
articleCover: [
|
||||
{required: true, message: '封面', trigger: 'change'}
|
||||
],
|
||||
sortId: [
|
||||
{required: true, message: '分类', trigger: 'change'}
|
||||
],
|
||||
labelId: [
|
||||
{required: true, message: '标签', trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {
|
||||
'article.sortId'(newVal, oldVal) {
|
||||
if (oldVal !== null) {
|
||||
this.article.labelId = null;
|
||||
}
|
||||
if (!this.$common.isEmpty(newVal) && !this.$common.isEmpty(this.labels)) {
|
||||
this.labelsTemp = this.labels.filter(l => l.sortId === newVal);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getSortAndLabel();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
imgAdd(pos, file) {
|
||||
let suffix = "";
|
||||
if (file.name.lastIndexOf('.') !== -1) {
|
||||
suffix = file.name.substring(file.name.lastIndexOf('.'));
|
||||
}
|
||||
let key = "articlePicture" + "/" + this.$store.state.currentAdmin.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentAdmin.id + new Date().getTime() + Math.floor(Math.random() * 1000) + suffix;
|
||||
|
||||
let storeType = localStorage.getItem("defaultStoreType");
|
||||
|
||||
let fd = new FormData();
|
||||
fd.append("file", file);
|
||||
fd.append("originalName", file.name);
|
||||
fd.append("key", key);
|
||||
fd.append("relativePath", key);
|
||||
fd.append("type", "articlePicture");
|
||||
fd.append("storeType", storeType);
|
||||
|
||||
if (storeType === "local") {
|
||||
this.saveLocal(pos, fd);
|
||||
} else if (storeType === "qiniu") {
|
||||
this.saveQiniu(pos, fd);
|
||||
}
|
||||
},
|
||||
saveLocal(pos, fd) {
|
||||
this.$http.upload(this.$constant.baseURL + "/resource/upload", fd, true)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
let url = res.data;
|
||||
this.$refs.md.$img2Url(pos, url);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
saveQiniu(pos, fd) {
|
||||
this.$http.get(this.$constant.baseURL + "/qiniu/getUpToken", {key: fd.get("key")}, true)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
fd.append("token", res.data);
|
||||
|
||||
this.$http.uploadQiniu(this.$store.state.sysConfig.qiniuUrl, fd)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.key)) {
|
||||
let url = this.$store.state.sysConfig['qiniu.downloadUrl'] + res.key;
|
||||
let file = fd.get("file");
|
||||
this.$common.saveResource(this, "articlePicture", url, file.size, file.type, file.name, "qiniu", true);
|
||||
this.$refs.md.$img2Url(pos, url);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
addArticleCover(res) {
|
||||
this.article.articleCover = res;
|
||||
},
|
||||
getSortAndLabel() {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/listSortAndLabel")
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.sorts = res.data.sorts;
|
||||
this.labels = res.data.labels;
|
||||
if (!this.$common.isEmpty(this.id)) {
|
||||
this.getArticle();
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
getArticle() {
|
||||
this.$http.get(this.$constant.baseURL + "/admin/article/getArticleById", {id: this.id}, true)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.article = res.data;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
submitForm(formName) {
|
||||
if ((this.article.viewType === 'password' || this.article.viewType === 'userLv') &&
|
||||
this.$common.isEmpty(this.article.viewValue)) {
|
||||
this.$message({
|
||||
message: "请设置文章访问参数！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.$common.isEmpty(this.id)) {
|
||||
this.saveArticle(this.article, "/article/saveArticle")
|
||||
} else {
|
||||
this.article.id = this.id;
|
||||
this.saveArticle(this.article, "/article/updateArticle")
|
||||
}
|
||||
} else {
|
||||
this.$message({
|
||||
message: "请完善必填项！",
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
if (!this.$common.isEmpty(this.id)) {
|
||||
this.getArticle();
|
||||
}
|
||||
},
|
||||
saveArticle(value, url) {
|
||||
this.$confirm('确认保存？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.post(this.$constant.baseURL + url, value, true)
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
message: "保存成功！",
|
||||
type: "success"
|
||||
});
|
||||
this.$router.push({path: '/postList'});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消保存!'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.my-tag {
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: var(--lightYellow);
|
||||
border: none;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.table-td-thumb {
|
||||
border-radius: 2px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.el-switch {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
322
src/components/admin/postList.vue
Normal file
322
src/components/admin/postList.vue
Normal file
@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="handle-box">
|
||||
<el-select v-model="pagination.recommendStatus" placeholder="是否推荐" style="width: 120px" class="mrb10">
|
||||
<el-option key="1" label="是" :value="true"></el-option>
|
||||
<el-option key="2" label="否" :value="false"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="pagination.viewType" placeholder="访问类型" style="width: 120px" class="mrb10">
|
||||
<el-option key="1" label="公开" value="public"></el-option>
|
||||
<el-option key="2" label="登录" value="login"></el-option>
|
||||
<el-option key="3" label="用户等级" value="userLv"></el-option>
|
||||
<el-option key="4" label="密码" value="password"></el-option>
|
||||
</el-select>
|
||||
<el-select style="width: 140px" class="mrb10" v-model="pagination.sortId" placeholder="请选择分类">
|
||||
<el-option
|
||||
v-for="item in sorts"
|
||||
:key="item.id"
|
||||
:label="item.sortName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select style="width: 140px" class="mrb10" v-model="pagination.labelId" placeholder="请选择标签">
|
||||
<el-option
|
||||
v-for="item in labelsTemp"
|
||||
:key="item.id"
|
||||
:label="item.labelName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-input v-model="pagination.searchKey" placeholder="文章标题" class="handle-input mrb10"></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="searchArticles()">搜索</el-button>
|
||||
<el-button type="danger" @click="clearSearch()">清除参数</el-button>
|
||||
<el-button type="primary" @click="$router.push({path: '/postEdit'})">新增文章</el-button>
|
||||
</div>
|
||||
<el-table :data="articles" border class="table" header-cell-class-name="table-header">
|
||||
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||
<el-table-column prop="username" label="作者" align="center"></el-table-column>
|
||||
<el-table-column prop="articleTitle" label="文章标题" align="center"></el-table-column>
|
||||
<el-table-column prop="sort.sortName" label="分类" align="center"></el-table-column>
|
||||
<el-table-column prop="label.labelName" label="标签" align="center"></el-table-column>
|
||||
<el-table-column prop="viewCount" label="浏览量" align="center"></el-table-column>
|
||||
<el-table-column prop="likeCount" label="点赞数" align="center"></el-table-column>
|
||||
<el-table-column label="访问类型" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success"
|
||||
v-if="scope.row.viewType === 'public'"
|
||||
disable-transitions>
|
||||
公开
|
||||
</el-tag>
|
||||
<el-tag type="success"
|
||||
v-else-if="scope.row.viewType === 'login'"
|
||||
disable-transitions>
|
||||
登录
|
||||
</el-tag>
|
||||
<el-tag type="success"
|
||||
v-else-if="scope.row.viewType === 'userLv'"
|
||||
disable-transitions>
|
||||
用户等级
|
||||
</el-tag>
|
||||
<el-tag type="success"
|
||||
v-else
|
||||
disable-transitions>
|
||||
密码
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="封面" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-image lazy class="table-td-thumb" :src="scope.row.articleCover" fit="cover"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否启用评论" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.commentStatus === false ? 'danger' : 'success'"
|
||||
disable-transitions>
|
||||
{{scope.row.commentStatus === false ? '否' : '是'}}
|
||||
</el-tag>
|
||||
<el-switch @click.native="changeStatus(scope.row, 2)" v-model="scope.row.commentStatus"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否推荐" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.recommendStatus === false ? 'danger' : 'success'"
|
||||
disable-transitions>
|
||||
{{scope.row.recommendStatus === false ? '否' : '是'}}
|
||||
</el-tag>
|
||||
<el-switch @click.native="changeStatus(scope.row, 3)" v-model="scope.row.recommendStatus"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="commentCount" label="评论数" align="center"></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||||
<el-table-column prop="updateTime" label="最终修改时间" align="center"></el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)" @click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination background layout="total, prev, pager, next"
|
||||
:pager-count="5"
|
||||
:current-page="pagination.current"
|
||||
:page-size="pagination.size"
|
||||
:total="pagination.total"
|
||||
@current-change="handlePageChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isBoss: this.$store.state.currentAdmin.isBoss,
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
searchKey: "",
|
||||
recommendStatus: null,
|
||||
viewType: null,
|
||||
sortId: null,
|
||||
labelId: null
|
||||
},
|
||||
articles: [],
|
||||
sorts: [],
|
||||
labels: [],
|
||||
labelsTemp: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {
|
||||
'pagination.sortId'(newVal) {
|
||||
this.pagination.labelId = null;
|
||||
if (!this.$common.isEmpty(newVal) && !this.$common.isEmpty(this.labels)) {
|
||||
this.labelsTemp = this.labels.filter(l => l.sortId === newVal);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getArticles();
|
||||
this.getSortAndLabel();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
getSortAndLabel() {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/listSortAndLabel")
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.sorts = res.data.sorts;
|
||||
this.labels = res.data.labels;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
clearSearch() {
|
||||
this.pagination = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
searchKey: "",
|
||||
recommendStatus: null,
|
||||
sortId: null,
|
||||
labelId: null
|
||||
}
|
||||
this.getArticles();
|
||||
},
|
||||
getArticles() {
|
||||
let url = "";
|
||||
if (this.isBoss) {
|
||||
url = "/admin/article/boss/list";
|
||||
} else {
|
||||
url = "/admin/article/user/list";
|
||||
}
|
||||
this.$http.post(this.$constant.baseURL + url, this.pagination, true)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.articles = res.data.records;
|
||||
this.pagination.total = res.data.total;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
handlePageChange(val) {
|
||||
this.pagination.current = val;
|
||||
this.getArticles();
|
||||
},
|
||||
searchArticles() {
|
||||
this.pagination.total = 0;
|
||||
this.pagination.current = 1;
|
||||
this.getArticles();
|
||||
},
|
||||
changeStatus(article, flag) {
|
||||
let param;
|
||||
if (flag === 2) {
|
||||
param = {
|
||||
articleId: article.id,
|
||||
commentStatus: article.commentStatus
|
||||
}
|
||||
} else if (flag === 3) {
|
||||
param = {
|
||||
articleId: article.id,
|
||||
recommendStatus: article.recommendStatus
|
||||
}
|
||||
}
|
||||
this.$http.get(this.$constant.baseURL + "/admin/article/changeArticleStatus", param, true)
|
||||
.then((res) => {
|
||||
if (flag === 1) {
|
||||
this.$message({
|
||||
duration: 0,
|
||||
showClose: true,
|
||||
message: "修改成功！注意，文章不可见时必须设置密码才能访问！",
|
||||
type: "warning"
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: "修改成功！",
|
||||
type: "success"
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
handleDelete(item) {
|
||||
this.$confirm('确认删除？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.get(this.$constant.baseURL + "/article/deleteArticle", {id: item.id}, true)
|
||||
.then((res) => {
|
||||
this.pagination.current = 1;
|
||||
this.getArticles();
|
||||
this.$message({
|
||||
message: "删除成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消删除!'
|
||||
});
|
||||
});
|
||||
},
|
||||
handleEdit(item) {
|
||||
this.$router.push({path: '/postEdit', query: {id: item.id}});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.handle-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.handle-input {
|
||||
width: 160px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mrb10 {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.table-td-thumb {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 20px 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.el-switch {
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
276
src/components/admin/resourceList.vue
Normal file
276
src/components/admin/resourceList.vue
Normal file
@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="handle-box">
|
||||
<el-select clearable v-model="pagination.resourceType" placeholder="资源类型" class="handle-select mrb10">
|
||||
<el-option key="21" label="Video.Article" value="video/article"></el-option>
|
||||
<el-option key="20" label="公共资源" value="assets"></el-option>
|
||||
<el-option key="10" label="表情包" value="internetMeme"></el-option>
|
||||
<el-option key="1" label="用户头像" value="userAvatar"></el-option>
|
||||
<el-option key="2" label="文章封面" value="articleCover"></el-option>
|
||||
<el-option key="3" label="文章图片" value="articlePicture"></el-option>
|
||||
<el-option key="5" label="网站头像" value="webAvatar"></el-option>
|
||||
<el-option key="4" label="背景图片" value="webBackgroundImage"></el-option>
|
||||
<el-option key="6" label="随机头像" value="randomAvatar"></el-option>
|
||||
<el-option key="7" label="随机封面" value="randomCover"></el-option>
|
||||
<el-option key="8" label="画笔图片" value="graffiti"></el-option>
|
||||
<el-option key="9" label="评论图片" value="commentPicture"></el-option>
|
||||
<el-option key="11" label="聊天群头像" value="im/groupAvatar"></el-option>
|
||||
<el-option key="12" label="群聊天图片" value="im/groupMessage"></el-option>
|
||||
<el-option key="13" label="朋友聊天图片" value="im/friendMessage"></el-option>
|
||||
<el-option key="14" label="音乐声音" value="funnyUrl"></el-option>
|
||||
<el-option key="15" label="音乐封面" value="funnyCover"></el-option>
|
||||
<el-option key="16" label="Love.Cover" value="love/bgCover"></el-option>
|
||||
<el-option key="17" label="Love.Man" value="love/manCover"></el-option>
|
||||
<el-option key="18" label="Love.Woman" value="love/womanCover"></el-option>
|
||||
<el-option key="19" label="收藏夹封面" value="favoritesCover"></el-option>
|
||||
<el-option key="20" label="旅拍图片" value="lovePhotoCover"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
|
||||
<el-button type="primary" @click="addResources()">新增资源</el-button>
|
||||
</div>
|
||||
<el-table :data="resources" border class="table" header-cell-class-name="table-header">
|
||||
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||
<el-table-column prop="originalName" label="名称" align="center"></el-table-column>
|
||||
<el-table-column prop="userId" label="用户ID" align="center"></el-table-column>
|
||||
<el-table-column prop="type" label="资源类型" align="center"></el-table-column>
|
||||
<el-table-column label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status === false ? 'danger' : 'success'"
|
||||
disable-transitions>
|
||||
{{scope.row.status === false ? '禁用' : '启用'}}
|
||||
</el-tag>
|
||||
<el-switch @click.native="changeStatus(scope.row)" v-model="scope.row.status"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="路径" align="center">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="!$common.isEmpty(scope.row.mimeType) && scope.row.mimeType.includes('image')">
|
||||
<el-image lazy :preview-src-list="[scope.row.path]" class="table-td-thumb" :src="scope.row.path"
|
||||
fit="cover"></el-image>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{scope.row.path}}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="大小(KB)" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{Math.round(scope.row.size / 1024)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="mimeType" label="类型" align="center"></el-table-column>
|
||||
<el-table-column prop="storeType" label="存储平台" align="center"></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination background layout="total, prev, pager, next"
|
||||
:pager-count="5"
|
||||
:current-page="pagination.current"
|
||||
:page-size="pagination.size"
|
||||
:total="pagination.total"
|
||||
@current-change="handlePageChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog title="文件"
|
||||
:visible.sync="resourceDialog"
|
||||
width="25%"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
center>
|
||||
<div>
|
||||
<div style="display: flex;margin-bottom: 10px">
|
||||
<div style="line-height: 40px">存储平台：</div>
|
||||
<el-select v-model="storeType" placeholder="存储平台" style="width: 120px">
|
||||
<el-option
|
||||
v-for="(item, i) in storeTypes.filter(s => s.isShow === 'true')"
|
||||
:key="i"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<uploadPicture :isAdmin="true" :prefix="pagination.resourceType" @addPicture="addFile"
|
||||
:storeType="storeType"
|
||||
:listType="'text'" :accept="'image/*, video/*, audio/*'"
|
||||
:maxSize="100" :maxNumber="10"></uploadPicture>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const uploadPicture = () => import( "../common/uploadPicture");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uploadPicture
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
resourceType: ""
|
||||
},
|
||||
resources: [],
|
||||
resourceDialog: false,
|
||||
storeTypes: [
|
||||
{label: "服务器", value: "local", isShow: this.$store.state.sysConfig['local.enable']},
|
||||
{label: "七牛云", value: "qiniu", isShow: this.$store.state.sysConfig['qiniu.enable']}
|
||||
],
|
||||
storeType: localStorage.getItem("defaultStoreType")
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getResources();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleDelete(item) {
|
||||
this.$confirm('确认删除资源？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.post(this.$constant.baseURL + "/resource/deleteResource", {path: item.path}, true, false)
|
||||
.then((res) => {
|
||||
this.pagination.current = 1;
|
||||
this.getResources();
|
||||
this.$message({
|
||||
message: "删除成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消删除!'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
addFile(res) {
|
||||
},
|
||||
|
||||
addResources() {
|
||||
if (this.$common.isEmpty(this.pagination.resourceType)) {
|
||||
this.$message({
|
||||
message: "请选择资源类型！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.resourceDialog = true;
|
||||
},
|
||||
search() {
|
||||
this.pagination.total = 0;
|
||||
this.pagination.current = 1;
|
||||
this.getResources();
|
||||
},
|
||||
getResources() {
|
||||
this.$http.post(this.$constant.baseURL + "/resource/listResource", this.pagination, true)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.resources = res.data.records;
|
||||
this.pagination.total = res.data.total;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
changeStatus(item) {
|
||||
this.$http.get(this.$constant.baseURL + "/resource/changeResourceStatus", {
|
||||
id: item.id,
|
||||
flag: item.status
|
||||
}, true)
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
message: "修改成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
handlePageChange(val) {
|
||||
this.pagination.current = val;
|
||||
this.getResources();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.handle-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.handle-select {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mrb10 {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.table-td-thumb {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 20px 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.el-switch {
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
394
src/components/admin/resourcePathList.vue
Normal file
394
src/components/admin/resourcePathList.vue
Normal file
@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="handle-box">
|
||||
<el-select clearable v-model="pagination.resourceType" placeholder="资源聚合类型" class="handle-select mrb10">
|
||||
<el-option
|
||||
v-for="(item, i) in resourceTypes"
|
||||
:key="i"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select clearable v-model="pagination.status" placeholder="状态" class="handle-select mrb10">
|
||||
<el-option key="1" label="启用" :value="true"></el-option>
|
||||
<el-option key="2" label="禁用" :value="false"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
|
||||
<el-button type="primary" @click="addResourcePathDialog = true">新增资源聚合</el-button>
|
||||
</div>
|
||||
<el-table :data="resourcePaths" border class="table" header-cell-class-name="table-header">
|
||||
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||
<el-table-column prop="title" label="标题" align="center"></el-table-column>
|
||||
<el-table-column prop="classify" label="分类" align="center"></el-table-column>
|
||||
<el-table-column prop="introduction" label="简介" align="center"></el-table-column>
|
||||
<el-table-column label="封面" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-image lazy :preview-src-list="[scope.row.cover]" class="table-td-thumb" :src="scope.row.cover"
|
||||
fit="cover"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="url" label="链接" align="center"></el-table-column>
|
||||
|
||||
<el-table-column prop="type" label="资源类型" align="center"></el-table-column>
|
||||
<el-table-column label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status === false ? 'danger' : 'success'"
|
||||
disable-transitions>
|
||||
{{scope.row.status === false ? '禁用' : '启用'}}
|
||||
</el-tag>
|
||||
<el-switch @click.native="changeStatus(scope.row)" v-model="scope.row.status"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="remark" label="备注" align="center"></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)"
|
||||
@click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination background layout="total, prev, pager, next"
|
||||
:pager-count="5"
|
||||
:current-page="pagination.current"
|
||||
:page-size="pagination.size"
|
||||
:total="pagination.total"
|
||||
@current-change="handlePageChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog title="图片"
|
||||
:visible.sync="coverDialog"
|
||||
width="25%"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
center>
|
||||
<div>
|
||||
<uploadPicture :isAdmin="true" :prefix="resourcePath.type + 'Cover'" @addPicture="addPicture" :maxSize="2"
|
||||
:maxNumber="1"></uploadPicture>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="文件"
|
||||
:visible.sync="uploadDialog"
|
||||
width="25%"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
center>
|
||||
<div>
|
||||
<uploadPicture :isAdmin="true" :prefix="resourcePath.type + 'Url'" @addPicture="addFile" :maxSize="10"
|
||||
:maxNumber="1" :listType="'text'" :accept="'image/*, video/*, audio/*'"></uploadPicture>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="资源聚合"
|
||||
:visible.sync="addResourcePathDialog"
|
||||
width="50%"
|
||||
:before-close="clearDialog"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
center>
|
||||
<div>
|
||||
<div>
|
||||
<div class="myCenter">
|
||||
<el-radio-group v-model="resourcePath.type">
|
||||
<template v-for="item in resourceTypes">
|
||||
<el-radio-button :label="item.value">{{ item.label }}</el-radio-button>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-bottom: 5px">标题：</div>
|
||||
<el-input maxlength="60" v-model="resourcePath.title"></el-input>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">分类：</div>
|
||||
<el-input :disabled="!['friendUrl', 'lovePhoto', 'funny', 'favorites'].includes(resourcePath.type)"
|
||||
maxlength="30" v-model="resourcePath.classify"></el-input>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">简介：</div>
|
||||
<el-input :disabled="!['friendUrl', 'favorites'].includes(resourcePath.type)"
|
||||
maxlength="1000" v-model="resourcePath.introduction"></el-input>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">封面：</div>
|
||||
<div style="display: flex">
|
||||
<el-input v-model="resourcePath.cover"></el-input>
|
||||
<div style="width: 66px;margin: 3.5px 0 0 10px">
|
||||
<proButton :info="'上传封面'"
|
||||
@click.native="addResourcePathCover()"
|
||||
:before="$constant.before_color_1"
|
||||
:after="$constant.after_color_1">
|
||||
</proButton>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">链接：</div>
|
||||
<div style="display: flex">
|
||||
<el-input :disabled="!['friendUrl', 'funny', 'favorites'].includes(resourcePath.type)"
|
||||
v-model="resourcePath.url"></el-input>
|
||||
<div style="width: 66px;margin: 3.5px 0 0 10px">
|
||||
<proButton :info="'上传文件'"
|
||||
@click.native="addResourcePathUrl()"
|
||||
:before="$constant.before_color_1"
|
||||
:after="$constant.after_color_1">
|
||||
</proButton>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">资源类型：</div>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">备注：</div>
|
||||
<el-input :disabled="![].includes(resourcePath.type)"
|
||||
maxlength="1000" v-model="resourcePath.remark" type="textarea"></el-input>
|
||||
</div>
|
||||
<div style="display: flex;margin-top: 30px" class="myCenter">
|
||||
<proButton :info="'提交'"
|
||||
@click.native="addResourcePath()"
|
||||
:before="$constant.before_color_2"
|
||||
:after="$constant.after_color_2">
|
||||
</proButton>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const uploadPicture = () => import( "../common/uploadPicture");
|
||||
const proButton = () => import( "../common/proButton");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uploadPicture,
|
||||
proButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
resourceTypes: [
|
||||
{label: "友链", value: "friendUrl"},
|
||||
{label: "图片", value: "lovePhoto"},
|
||||
{label: "音乐", value: "funny"},
|
||||
{label: "收藏夹", value: "favorites"}
|
||||
],
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
resourceType: "",
|
||||
status: null
|
||||
},
|
||||
resourcePaths: [],
|
||||
coverDialog: false,
|
||||
uploadDialog: false,
|
||||
addResourcePathDialog: false,
|
||||
isUpdate: false,
|
||||
resourcePath: {
|
||||
title: "",
|
||||
classify: "",
|
||||
introduction: "",
|
||||
cover: "",
|
||||
url: "",
|
||||
type: "",
|
||||
remark: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getResourcePaths();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
addPicture(res) {
|
||||
this.resourcePath.cover = res;
|
||||
this.coverDialog = false;
|
||||
},
|
||||
addFile(res) {
|
||||
this.resourcePath.url = res;
|
||||
this.uploadDialog = false;
|
||||
},
|
||||
addResourcePathUrl() {
|
||||
if (this.addResourcePathDialog === false) {
|
||||
return;
|
||||
}
|
||||
if (!['funny'].includes(this.resourcePath.type)) {
|
||||
this.$message({
|
||||
message: "请选择有效资源类型！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.uploadDialog = true;
|
||||
},
|
||||
addResourcePathCover() {
|
||||
if (this.addResourcePathDialog === false) {
|
||||
return;
|
||||
}
|
||||
if (this.$common.isEmpty(this.resourcePath.type)) {
|
||||
this.$message({
|
||||
message: "请选择资源类型！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.coverDialog = true;
|
||||
},
|
||||
addResourcePath() {
|
||||
if (this.$common.isEmpty(this.resourcePath.title) || this.$common.isEmpty(this.resourcePath.type)) {
|
||||
this.$message({
|
||||
message: "标题和资源类型不能为空！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$http.post(this.$constant.baseURL + "/webInfo/" + (this.isUpdate ? "updateResourcePath" : "saveResourcePath"), this.resourcePath, true)
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
message: "保存成功！",
|
||||
type: "success"
|
||||
});
|
||||
this.addResourcePathDialog = false;
|
||||
this.clearDialog();
|
||||
this.search();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
search() {
|
||||
this.pagination.total = 0;
|
||||
this.pagination.current = 1;
|
||||
this.getResourcePaths();
|
||||
},
|
||||
getResourcePaths() {
|
||||
this.$http.post(this.$constant.baseURL + "/webInfo/listResourcePath", this.pagination, true)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.resourcePaths = res.data.records;
|
||||
this.pagination.total = res.data.total;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
changeStatus(item) {
|
||||
this.$http.post(this.$constant.baseURL + "/webInfo/updateResourcePath", item, true)
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
message: "修改成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
handlePageChange(val) {
|
||||
this.pagination.current = val;
|
||||
this.getResourcePaths();
|
||||
},
|
||||
handleDelete(item) {
|
||||
this.$confirm('确认删除？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/deleteResourcePath", {id: item.id}, true)
|
||||
.then((res) => {
|
||||
this.search();
|
||||
this.$message({
|
||||
message: "删除成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消删除!'
|
||||
});
|
||||
});
|
||||
},
|
||||
handleEdit(item) {
|
||||
this.resourcePath = JSON.parse(JSON.stringify(item));
|
||||
this.addResourcePathDialog = true;
|
||||
this.isUpdate = true;
|
||||
},
|
||||
clearDialog() {
|
||||
this.isUpdate = false;
|
||||
this.addResourcePathDialog = false;
|
||||
this.resourcePath = {
|
||||
title: "",
|
||||
classify: "",
|
||||
introduction: "",
|
||||
cover: "",
|
||||
url: "",
|
||||
type: "",
|
||||
remark: ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.handle-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.handle-select {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mrb10 {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.table-td-thumb {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 20px 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.el-switch {
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
323
src/components/admin/sortList.vue
Normal file
323
src/components/admin/sortList.vue
Normal file
@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom: 20px">
|
||||
<el-button type="primary" @click="sortDialog = true">新增分类</el-button>
|
||||
</div>
|
||||
<el-table :data="sortInfo" border class="table" header-cell-class-name="table-header">
|
||||
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||
<el-table-column prop="sortName" label="分类名称" align="center"></el-table-column>
|
||||
<el-table-column prop="sortDescription" label="分类描述" align="center"></el-table-column>
|
||||
<el-table-column label="分类类型" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.sortType === 0">导航栏分类</span>
|
||||
<span v-else-if="scope.row.sortType === 1">普通分类</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="priority" label="分类优先级" align="center"></el-table-column>
|
||||
<el-table-column prop="countOfSort" label="文章总数" align="center"></el-table-column>
|
||||
<el-table-column label="操作" width="380" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-edit" @click="editSort(scope.row)">
|
||||
编辑分类
|
||||
</el-button>
|
||||
<el-button type="text" icon="el-icon-edit" @click="sayLabel(scope.row)">
|
||||
查看标签
|
||||
</el-button>
|
||||
<el-button type="text" icon="el-icon-edit" @click="insertLabel(scope.row)">
|
||||
新增标签
|
||||
</el-button>
|
||||
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)"
|
||||
@click="deleteHandle(scope.row.id, 1)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-table v-if="!$common.isEmpty(sort)" :data="sort.labels" border class="table"
|
||||
style="margin-top: 40px"
|
||||
header-cell-class-name="table-header">
|
||||
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||
<el-table-column label="分类名称" align="center">
|
||||
<span>{{sort.sortName}}</span>
|
||||
</el-table-column>
|
||||
<el-table-column prop="labelName" label="标签名称" align="center"></el-table-column>
|
||||
<el-table-column prop="labelDescription" label="标签描述" align="center"></el-table-column>
|
||||
<el-table-column prop="countOfLabel" label="文章总数" align="center"></el-table-column>
|
||||
<el-table-column label="操作" width="320" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-edit" @click="editLabel(scope.row)">
|
||||
编辑标签
|
||||
</el-button>
|
||||
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)"
|
||||
@click="deleteHandle(scope.row.id, 2)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog title="分类"
|
||||
:visible.sync="sortDialog"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
:append-to-body="true"
|
||||
destroy-on-close
|
||||
center>
|
||||
<div class="my-dialog">
|
||||
<div class="myCenter">
|
||||
<el-radio-group v-model="sortForHttp.sortType">
|
||||
<el-radio-button :label="0">导航栏分类</el-radio-button>
|
||||
<el-radio-button :label="1">普通分类</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<el-input placeholder="请输入分类名称" v-model="sortForHttp.sortName">
|
||||
<template slot="prepend">分类名称</template>
|
||||
</el-input>
|
||||
<el-input placeholder="请输入分类描述" v-model="sortForHttp.sortDescription">
|
||||
<template slot="prepend">分类描述</template>
|
||||
</el-input>
|
||||
<el-input type="number" placeholder="请输入整数，数字小的在前面"
|
||||
v-model="sortForHttp.priority">
|
||||
<template slot="prepend">分类优先级</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose()">取 消</el-button>
|
||||
<el-button type="primary" @click="saveSortEdit()">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="标签"
|
||||
:visible.sync="labelDialog"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
:append-to-body="true"
|
||||
destroy-on-close
|
||||
center>
|
||||
<div class="my-dialog">
|
||||
<el-input placeholder="请输入标签名称" v-model="labelForHttp.labelName">
|
||||
<template slot="prepend">标签名称</template>
|
||||
</el-input>
|
||||
<el-input placeholder="请输入标签描述" v-model="labelForHttp.labelDescription">
|
||||
<template slot="prepend">标签描述</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose()">取 消</el-button>
|
||||
<el-button type="primary" @click="saveLabelEdit()">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sortDialog: false,
|
||||
labelDialog: false,
|
||||
sortInfo: [],
|
||||
sort: {},
|
||||
sortForHttp: {
|
||||
id: null,
|
||||
sortName: "",
|
||||
sortDescription: "",
|
||||
sortType: null,
|
||||
priority: null
|
||||
},
|
||||
labelForHttp: {
|
||||
id: null,
|
||||
sortId: null,
|
||||
labelName: "",
|
||||
labelDescription: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getSortInfo();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
deleteHandle(id, flag) {
|
||||
let url;
|
||||
if (flag === 1) {
|
||||
url = "/webInfo/deleteSort";
|
||||
} else if (flag === 2) {
|
||||
url = "/webInfo/deleteLabel";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
this.$confirm('确认删除？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.get(this.$constant.baseURL + url, {id: id}, true)
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
message: "删除成功！",
|
||||
type: "success"
|
||||
});
|
||||
this.getSortInfo();
|
||||
this.sort = {};
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消删除!'
|
||||
});
|
||||
});
|
||||
},
|
||||
saveSortEdit() {
|
||||
if (this.$common.isEmpty(this.sortForHttp.sortType) ||
|
||||
this.$common.isEmpty(this.sortForHttp.priority) ||
|
||||
this.$common.isEmpty(this.sortForHttp.sortName) ||
|
||||
this.$common.isEmpty(this.sortForHttp.sortDescription)) {
|
||||
this.$message({
|
||||
message: "请完善所有分类信息！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let url;
|
||||
if (this.$common.isEmpty(this.sortForHttp.id)) {
|
||||
url = "/webInfo/saveSort";
|
||||
} else {
|
||||
url = "/webInfo/updateSort";
|
||||
}
|
||||
this.$http.post(this.$constant.baseURL + url, this.sortForHttp, true)
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
message: "保存成功！",
|
||||
type: "success"
|
||||
});
|
||||
this.getSortInfo();
|
||||
this.handleClose();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
saveLabelEdit() {
|
||||
if (this.$common.isEmpty(this.labelForHttp.labelName) ||
|
||||
this.$common.isEmpty(this.labelForHttp.labelDescription)) {
|
||||
this.$message({
|
||||
message: "请完善所有标签信息！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let url;
|
||||
if (this.$common.isEmpty(this.labelForHttp.id)) {
|
||||
url = "/webInfo/saveLabel";
|
||||
} else {
|
||||
url = "/webInfo/updateLabel";
|
||||
}
|
||||
this.$http.post(this.$constant.baseURL + url, this.labelForHttp, true)
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
message: "保存成功！",
|
||||
type: "success"
|
||||
});
|
||||
this.getSortInfo();
|
||||
this.handleClose();
|
||||
this.sort = {};
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
editSort(sort) {
|
||||
this.sortDialog = true;
|
||||
this.sortForHttp.id = sort.id;
|
||||
this.sortForHttp.sortName = sort.sortName;
|
||||
this.sortForHttp.sortDescription = sort.sortDescription;
|
||||
this.sortForHttp.sortType = sort.sortType;
|
||||
this.sortForHttp.priority = sort.priority;
|
||||
},
|
||||
editLabel(label) {
|
||||
this.labelDialog = true;
|
||||
this.labelForHttp.id = label.id;
|
||||
this.labelForHttp.sortId = label.sortId;
|
||||
this.labelForHttp.labelName = label.labelName;
|
||||
this.labelForHttp.labelDescription = label.labelDescription;
|
||||
},
|
||||
insertLabel(sort) {
|
||||
this.labelForHttp.sortId = sort.id;
|
||||
this.labelDialog = true;
|
||||
},
|
||||
handleClose() {
|
||||
this.labelForHttp = {
|
||||
id: null,
|
||||
sortId: null,
|
||||
labelName: "",
|
||||
labelDescription: ""
|
||||
};
|
||||
this.sortForHttp = {
|
||||
id: null,
|
||||
sortName: "",
|
||||
sortDescription: "",
|
||||
sortType: null,
|
||||
priority: null
|
||||
};
|
||||
this.sortDialog = false;
|
||||
this.labelDialog = false;
|
||||
},
|
||||
sayLabel(sort) {
|
||||
this.sort = sort;
|
||||
},
|
||||
getSortInfo() {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/getSortInfo")
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.sortInfo = res.data;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.my-dialog > div {
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.my-dialog >>> input::-webkit-inner-spin-button {
|
||||
appearance: none;
|
||||
}
|
||||
</style>
|
||||
138
src/components/admin/treeHoleList.vue
Normal file
138
src/components/admin/treeHoleList.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tag effect="dark" class="my-tag">
|
||||
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
|
||||
<path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01"></path>
|
||||
<path
|
||||
d="M682.666667 204.8h238.933333a34.133333 34.133333 0 0 1 34.133333 34.133333v648.533334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V204.8z"
|
||||
fill="#FFAA44"></path>
|
||||
<path
|
||||
d="M68.266667 921.6a34.133333 34.133333 0 0 0 34.133333 34.133333h785.066667a68.266667 68.266667 0 0 1-68.266667-68.266666V102.4a34.133333 34.133333 0 0 0-34.133333-34.133333H102.4a34.133333 34.133333 0 0 0-34.133333 34.133333v819.2z"
|
||||
fill="#11AA66"></path>
|
||||
<path
|
||||
d="M238.933333 307.2a34.133333 34.133333 0 0 0 0 68.266667h136.533334a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h409.6a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h204.8a34.133333 34.133333 0 1 0 0-68.266667H238.933333z"
|
||||
fill="#FFFFFF"></path>
|
||||
</svg>
|
||||
留言列表
|
||||
</el-tag>
|
||||
<el-table :data="treeHoles" border class="table" header-cell-class-name="table-header">
|
||||
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||
<el-table-column prop="message" label="留言内容" align="center"></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)" @click="handleDelete(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination background layout="total, prev, pager, next"
|
||||
:pager-count="5"
|
||||
:current-page="pagination.current"
|
||||
:page-size="pagination.size"
|
||||
:total="pagination.total"
|
||||
@current-change="handlePageChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0
|
||||
},
|
||||
treeHoles: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getTreeHoles()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
getTreeHoles() {
|
||||
this.$http.post(this.$constant.baseURL + "/admin/treeHole/boss/list", this.pagination, true)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.treeHoles = res.data.records;
|
||||
this.pagination.total = res.data.total;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
handlePageChange(val) {
|
||||
this.pagination.current = val;
|
||||
this.getTreeHoles();
|
||||
},
|
||||
handleDelete(item) {
|
||||
this.$confirm('确认删除？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/deleteTreeHole", {id: item.id}, true)
|
||||
.then((res) => {
|
||||
this.pagination.current = 1;
|
||||
this.getTreeHoles();
|
||||
this.$message({
|
||||
message: "删除成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消删除!'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.my-tag {
|
||||
margin-bottom: 40px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: var(--lightYellow);
|
||||
border: none;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 20px 0;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
433
src/components/admin/userList.vue
Normal file
433
src/components/admin/userList.vue
Normal file
@ -0,0 +1,433 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="handle-box">
|
||||
<el-select v-model="pagination.userType" placeholder="用户类型" class="handle-select mrb10">
|
||||
<el-option key="1" label="站长" :value="0"></el-option>
|
||||
<el-option key="2" label="管理员" :value="1"></el-option>
|
||||
<el-option key="3" label="普通用户" :value="2"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="pagination.userStatus" placeholder="用户状态" class="handle-select mrb10">
|
||||
<el-option key="1" label="启用" :value="true"></el-option>
|
||||
<el-option key="2" label="禁用" :value="false"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="pagination.userLv" placeholder="用户等级" class="handle-select mrb10">
|
||||
<el-option key="1" label="VIP1" :value="1"></el-option>
|
||||
<el-option key="2" label="VIP2" :value="2"></el-option>
|
||||
<el-option key="3" label="VIP3" :value="3"></el-option>
|
||||
<el-option key="4" label="VIP4" :value="4"></el-option>
|
||||
<el-option key="5" label="VIP5" :value="5"></el-option>
|
||||
<el-option key="6" label="VIP6" :value="6"></el-option>
|
||||
</el-select>
|
||||
<el-input v-model="pagination.searchKey" placeholder="用户名/手机号/邮箱" class="handle-input mrb10"></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="searchUser()">搜索</el-button>
|
||||
<el-button type="danger" @click="clearSearch()">清除参数</el-button>
|
||||
</div>
|
||||
<el-table :data="users" border class="table" header-cell-class-name="table-header">
|
||||
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||
<el-table-column prop="username" label="用户名" align="center"></el-table-column>
|
||||
<el-table-column prop="phoneNumber" label="手机号" align="center"></el-table-column>
|
||||
<el-table-column prop="email" label="邮箱" align="center"></el-table-column>
|
||||
<el-table-column label="赞赏" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-input size="medium" maxlength="30" v-model="scope.row.admire"
|
||||
@blur="changeUserAdmire(scope.row)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户等级" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success"
|
||||
v-if="scope.row.userLv === 6"
|
||||
style="cursor: pointer"
|
||||
@click.native="editVipUser(scope.row)"
|
||||
disable-transitions>
|
||||
VIP6
|
||||
</el-tag>
|
||||
<el-tag type="success"
|
||||
v-else-if="scope.row.userLv === 5"
|
||||
style="cursor: pointer"
|
||||
@click.native="editVipUser(scope.row)"
|
||||
disable-transitions>
|
||||
VIP5
|
||||
</el-tag>
|
||||
<el-tag type="success"
|
||||
v-else-if="scope.row.userLv === 4"
|
||||
style="cursor: pointer"
|
||||
@click.native="editVipUser(scope.row)"
|
||||
disable-transitions>
|
||||
VIP4
|
||||
</el-tag>
|
||||
<el-tag type="success"
|
||||
v-else-if="scope.row.userLv === 3"
|
||||
style="cursor: pointer"
|
||||
@click.native="editVipUser(scope.row)"
|
||||
disable-transitions>
|
||||
VIP3
|
||||
</el-tag>
|
||||
<el-tag type="success"
|
||||
v-else-if="scope.row.userLv === 2"
|
||||
style="cursor: pointer"
|
||||
@click.native="editVipUser(scope.row)"
|
||||
disable-transitions>
|
||||
VIP2
|
||||
</el-tag>
|
||||
<el-tag type="success"
|
||||
v-else
|
||||
style="cursor: pointer"
|
||||
@click.native="editVipUser(scope.row)"
|
||||
disable-transitions>
|
||||
VIP1
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.userStatus === false ? 'danger' : 'success'"
|
||||
disable-transitions>
|
||||
{{scope.row.userStatus === false ? '禁用' : '启用'}}
|
||||
</el-tag>
|
||||
<el-switch v-if="scope.row.id !== $store.state.currentAdmin.id" @click.native="changeUserStatus(scope.row)" v-model="scope.row.userStatus"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="头像" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-image lazy class="table-td-thumb" :src="scope.row.avatar" fit="cover"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="性别" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success"
|
||||
v-if="scope.row.gender === 1"
|
||||
disable-transitions>
|
||||
男
|
||||
</el-tag>
|
||||
<el-tag type="success"
|
||||
v-else-if="scope.row.gender === 2"
|
||||
disable-transitions>
|
||||
女
|
||||
</el-tag>
|
||||
<el-tag type="success"
|
||||
v-else
|
||||
disable-transitions>
|
||||
保密
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="introduction" label="简介" align="center"></el-table-column>
|
||||
<el-table-column label="用户类型" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success"
|
||||
v-if="scope.row.userType === 0"
|
||||
disable-transitions>
|
||||
站长
|
||||
</el-tag>
|
||||
<el-tag type="success"
|
||||
v-else-if="scope.row.userType === 1"
|
||||
style="cursor: pointer"
|
||||
@click.native="editUser(scope.row)"
|
||||
disable-transitions>
|
||||
管理员
|
||||
</el-tag>
|
||||
<el-tag type="success"
|
||||
v-else
|
||||
style="cursor: pointer"
|
||||
@click.native="editUser(scope.row)"
|
||||
disable-transitions>
|
||||
普通用户
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="注册时间" align="center"></el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination background layout="total, prev, pager, next"
|
||||
:pager-count="5"
|
||||
:current-page="pagination.current"
|
||||
:page-size="pagination.size"
|
||||
:total="pagination.total"
|
||||
@current-change="handlePageChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑弹出框 -->
|
||||
<el-dialog title="修改用户类型"
|
||||
:visible.sync="editVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
:append-to-body="true"
|
||||
destroy-on-close
|
||||
center>
|
||||
<div class="myCenter">
|
||||
<el-radio-group v-model="changeUser.userType">
|
||||
<el-radio-button :label="1">管理员</el-radio-button>
|
||||
<el-radio-button :label="2">普通用户</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose()">取 消</el-button>
|
||||
<el-button type="primary" @click="saveEdit()">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 编辑弹出框 -->
|
||||
<el-dialog title="修改用户等级"
|
||||
:visible.sync="editVipVisible"
|
||||
width="40%"
|
||||
:before-close="handleClose"
|
||||
:append-to-body="true"
|
||||
destroy-on-close
|
||||
center>
|
||||
<div class="myCenter">
|
||||
<el-radio-group size="small" v-model="changeUser.userLv">
|
||||
<el-radio-button :label="1">VIP1</el-radio-button>
|
||||
<el-radio-button :label="2">VIP2</el-radio-button>
|
||||
<el-radio-button :label="3">VIP3</el-radio-button>
|
||||
<el-radio-button :label="4">VIP4</el-radio-button>
|
||||
<el-radio-button :label="5">VIP5</el-radio-button>
|
||||
<el-radio-button :label="6">VIP6</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose()">取 消</el-button>
|
||||
<el-button type="primary" @click="saveVipEdit()">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
searchKey: "",
|
||||
userStatus: null,
|
||||
userType: null,
|
||||
userLv: null
|
||||
},
|
||||
users: [],
|
||||
changeUser: {
|
||||
id: null,
|
||||
userType: null,
|
||||
userLv: null
|
||||
},
|
||||
editVisible: false,
|
||||
editVipVisible: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getUsers();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
clearSearch() {
|
||||
this.pagination = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
searchKey: "",
|
||||
userStatus: null,
|
||||
userType: null
|
||||
}
|
||||
this.getUsers();
|
||||
},
|
||||
getUsers() {
|
||||
this.$http.post(this.$constant.baseURL + "/admin/user/list", this.pagination, true)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.users = res.data.records;
|
||||
this.pagination.total = res.data.total;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
changeUserStatus(user) {
|
||||
this.$http.get(this.$constant.baseURL + "/admin/user/changeUserStatus", {
|
||||
userId: user.id,
|
||||
flag: user.userStatus
|
||||
}, true)
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
message: "修改成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
changeUserAdmire(user) {
|
||||
if (!this.$common.isEmpty(user.admire)) {
|
||||
this.$confirm('确认保存？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.get(this.$constant.baseURL + "/admin/user/changeUserAdmire", {
|
||||
userId: user.id,
|
||||
admire: user.admire
|
||||
}, true)
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
message: "修改成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消保存!'
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
editUser(user) {
|
||||
this.changeUser.id = user.id;
|
||||
this.changeUser.userType = user.userType;
|
||||
this.editVisible = true;
|
||||
},
|
||||
editVipUser(user) {
|
||||
if(user.userType === 0) {
|
||||
this.$message({
|
||||
message: "站长不能修改等级！",
|
||||
type: "warning"
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.changeUser.id = user.id;
|
||||
this.changeUser.userLv = user.userLv;
|
||||
this.editVipVisible = true;
|
||||
},
|
||||
handlePageChange(val) {
|
||||
this.pagination.current = val;
|
||||
this.getUsers();
|
||||
},
|
||||
searchUser() {
|
||||
this.pagination.total = 0;
|
||||
this.pagination.current = 1;
|
||||
this.getUsers();
|
||||
},
|
||||
handleClose() {
|
||||
this.changeUser = {
|
||||
id: null,
|
||||
userType: null,
|
||||
userLv: null
|
||||
};
|
||||
this.editVisible = false;
|
||||
this.editVipVisible = false;
|
||||
},
|
||||
saveVipEdit() {
|
||||
this.$http.get(this.$constant.baseURL + "/admin/user/changeUserLv", {
|
||||
userId: this.changeUser.id,
|
||||
userLv: this.changeUser.userLv
|
||||
}, true)
|
||||
.then((res) => {
|
||||
this.handleClose();
|
||||
this.getUsers();
|
||||
this.$message({
|
||||
message: "修改成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
saveEdit() {
|
||||
this.$http.get(this.$constant.baseURL + "/admin/user/changeUserType", {
|
||||
userId: this.changeUser.id,
|
||||
userType: this.changeUser.userType
|
||||
}, true)
|
||||
.then((res) => {
|
||||
this.handleClose();
|
||||
this.getUsers();
|
||||
this.$message({
|
||||
message: "修改成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.handle-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.handle-select {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.handle-input {
|
||||
width: 160px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mrb10 {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.table-td-thumb {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 20px 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.el-switch {
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
116
src/components/admin/verify.vue
Normal file
116
src/components/admin/verify.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div class="myCenter verify-container">
|
||||
<div class="verify-content">
|
||||
<div>
|
||||
<el-avatar :size="50" :src="$store.state.webInfo.avatar"></el-avatar>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="account">
|
||||
<template slot="prepend">账号</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="password" type="password">
|
||||
<template slot="prepend">密码</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div>
|
||||
<proButton :info="'提交'"
|
||||
@click.native="login()"
|
||||
:before="$constant.before_color_2"
|
||||
:after="$constant.after_color_2">
|
||||
</proButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const proButton = () => import( "../common/proButton");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
proButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
redirect: this.$route.query.redirect,
|
||||
account: "",
|
||||
password: ""
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
let sysConfig = this.$store.state.sysConfig;
|
||||
if (!this.$common.isEmpty(sysConfig) && !this.$common.isEmpty(sysConfig['webStaticResourcePrefix'])) {
|
||||
let root = document.querySelector(":root");
|
||||
let webStaticResourcePrefix = sysConfig['webStaticResourcePrefix'];
|
||||
root.style.setProperty("--backgroundPicture", "url(" + webStaticResourcePrefix + "assets/backgroundPicture.jpg)");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
if (this.$common.isEmpty(this.account) || this.$common.isEmpty(this.password)) {
|
||||
this.$message({
|
||||
message: "请输入账号或密码！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let user = {
|
||||
account: this.account.trim(),
|
||||
password: this.$common.encrypt(this.password.trim()),
|
||||
isAdmin: true
|
||||
};
|
||||
|
||||
this.$http.post(this.$constant.baseURL + "/user/login", user, true, false)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
localStorage.setItem("adminToken", res.data.accessToken);
|
||||
this.$store.commit("loadCurrentAdmin", res.data);
|
||||
this.account = "";
|
||||
this.password = "";
|
||||
this.$router.push({path: this.redirect});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.verify-container {
|
||||
height: 100vh;
|
||||
background: var(--backgroundPicture) center center / cover repeat;
|
||||
}
|
||||
|
||||
.verify-content {
|
||||
background: var(--maxWhiteMask);
|
||||
padding: 30px 40px 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.verify-content > div:first-child {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
top: -25px;
|
||||
}
|
||||
|
||||
.verify-content > div:not(:first-child) {
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
.verify-content > div:last-child > div {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
552
src/components/admin/webEdit.vue
Normal file
552
src/components/admin/webEdit.vue
Normal file
@ -0,0 +1,552 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-tag effect="dark" class="my-tag">
|
||||
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
|
||||
<path
|
||||
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||
fill="#8C7BFD"></path>
|
||||
<path
|
||||
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||
fill="#FFE37B"></path>
|
||||
</svg>
|
||||
基础信息
|
||||
</el-tag>
|
||||
<el-form :model="webInfo" :rules="rules" ref="ruleForm" label-width="80px"
|
||||
class="demo-ruleForm">
|
||||
<el-form-item label="网站名称" prop="webName">
|
||||
<el-input v-model="webInfo.webName"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="网站标题" prop="webTitle">
|
||||
<el-input v-model="webInfo.webTitle"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="页脚" prop="footer">
|
||||
<el-input v-model="webInfo.footer"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-switch @click.native="changeWebStatus(webInfo)" v-model="webInfo.status"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="背景" prop="backgroundImage">
|
||||
<div style="display: flex">
|
||||
<el-input v-model="webInfo.backgroundImage"></el-input>
|
||||
<el-image lazy class="table-td-thumb"
|
||||
style="margin-left: 10px"
|
||||
:preview-src-list="[webInfo.backgroundImage]"
|
||||
:src="webInfo.backgroundImage"
|
||||
fit="cover"></el-image>
|
||||
</div>
|
||||
<uploadPicture :isAdmin="true" :prefix="'webBackgroundImage'" style="margin-top: 15px"
|
||||
@addPicture="addBackgroundImage"
|
||||
:maxSize="3"
|
||||
:maxNumber="1"></uploadPicture>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="头像" prop="avatar">
|
||||
<div style="display: flex">
|
||||
<el-input v-model="webInfo.avatar"></el-input>
|
||||
<el-image lazy class="table-td-thumb"
|
||||
style="margin-left: 10px"
|
||||
:preview-src-list="[webInfo.avatar]"
|
||||
:src="webInfo.avatar"
|
||||
fit="cover"></el-image>
|
||||
</div>
|
||||
<uploadPicture :isAdmin="true" :prefix="'webAvatar'" style="margin-top: 15px" @addPicture="addAvatar"
|
||||
:maxSize="2"
|
||||
:maxNumber="1"></uploadPicture>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="提示" prop="waifuJson">
|
||||
<div style="display: flex">
|
||||
<el-input :disabled="disabled" :rows="6" type="textarea" v-model="webInfo.waifuJson"></el-input>
|
||||
<i class="el-icon-edit my-icon" @click="disabled = !disabled"></i>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="myCenter" style="margin-bottom: 22px">
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">保存基本信息</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-tag effect="dark" class="my-tag">
|
||||
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
|
||||
<path
|
||||
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||
fill="#8C7BFD"></path>
|
||||
<path
|
||||
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||
fill="#FFE37B"></path>
|
||||
</svg>
|
||||
公告
|
||||
</el-tag>
|
||||
<el-tag
|
||||
:key="i"
|
||||
v-for="(notice, i) in notices"
|
||||
closable
|
||||
:disable-transitions="false"
|
||||
@close="handleClose(notices, notice)">
|
||||
{{notice}}
|
||||
</el-tag>
|
||||
<el-input
|
||||
class="input-new-tag"
|
||||
v-if="inputNoticeVisible"
|
||||
v-model="inputNoticeValue"
|
||||
ref="saveNoticeInput"
|
||||
size="small"
|
||||
@keyup.enter.native="handleInputNoticeConfirm"
|
||||
@blur="handleInputNoticeConfirm">
|
||||
</el-input>
|
||||
<el-button v-else class="button-new-tag" size="small" @click="showNoticeInput()">+ 公告</el-button>
|
||||
<div class="myCenter" style="margin-bottom: 22px">
|
||||
<el-button type="primary" @click="saveNotice()">保存公告</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-tag effect="dark" class="my-tag">
|
||||
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
|
||||
<path
|
||||
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||
fill="#8C7BFD"></path>
|
||||
<path
|
||||
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||
fill="#FFE37B"></path>
|
||||
</svg>
|
||||
随机名称
|
||||
</el-tag>
|
||||
<el-tag
|
||||
:key="i"
|
||||
effect="dark"
|
||||
v-for="(name, i) in randomName"
|
||||
closable
|
||||
:disable-transitions="false"
|
||||
:type="types[Math.floor(Math.random() * 5)]"
|
||||
@close="handleClose(randomName, name)">
|
||||
{{name}}
|
||||
</el-tag>
|
||||
<el-input
|
||||
class="input-new-tag"
|
||||
v-if="inputRandomNameVisible"
|
||||
v-model="inputRandomNameValue"
|
||||
ref="saveRandomNameInput"
|
||||
size="small"
|
||||
@keyup.enter.native="handleInputRandomNameConfirm"
|
||||
@blur="handleInputRandomNameConfirm">
|
||||
</el-input>
|
||||
<el-button v-else class="button-new-tag" size="small" @click="showRandomNameInput">+ 随机名称</el-button>
|
||||
<div class="myCenter" style="margin-bottom: 22px">
|
||||
<el-button type="primary" @click="saveRandomName()">保存随机名称</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-tag effect="dark" class="my-tag">
|
||||
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
|
||||
<path
|
||||
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||
fill="#8C7BFD"></path>
|
||||
<path
|
||||
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||
fill="#FFE37B"></path>
|
||||
</svg>
|
||||
随机头像
|
||||
</el-tag>
|
||||
<div :key="i"
|
||||
style="display: flex"
|
||||
v-for="(avatar, i) in randomAvatar">
|
||||
<el-tag closable
|
||||
:disable-transitions="false"
|
||||
@close="handleClose(randomAvatar, avatar)">
|
||||
{{avatar}}
|
||||
</el-tag>
|
||||
<div>
|
||||
<el-image lazy class="table-td-thumb"
|
||||
style="margin: 10px"
|
||||
:preview-src-list="[avatar]"
|
||||
:src="avatar"
|
||||
fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-input
|
||||
class="input-new-tag"
|
||||
v-if="inputRandomAvatarVisible"
|
||||
v-model="inputRandomAvatarValue"
|
||||
ref="saveRandomAvatarInput"
|
||||
size="small"
|
||||
@keyup.enter.native="handleInputRandomAvatarConfirm"
|
||||
@blur="handleInputRandomAvatarConfirm">
|
||||
</el-input>
|
||||
<el-button v-else class="button-new-tag" size="small" @click="showRandomAvatarInput">+ 随机头像</el-button>
|
||||
<uploadPicture :isAdmin="true" :prefix="'randomAvatar'" style="margin: 10px" @addPicture="addRandomAvatar"
|
||||
:maxSize="1"
|
||||
:maxNumber="5"></uploadPicture>
|
||||
<div class="myCenter" style="margin-bottom: 22px">
|
||||
<el-button type="primary" @click="saveRandomAvatar()">保存随机头像</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-tag effect="dark" class="my-tag">
|
||||
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
|
||||
<path
|
||||
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||
fill="#8C7BFD"></path>
|
||||
<path
|
||||
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||
fill="#FFE37B"></path>
|
||||
</svg>
|
||||
随机封面
|
||||
</el-tag>
|
||||
<div :key="i"
|
||||
style="display: flex"
|
||||
v-for="(cover, i) in randomCover">
|
||||
<el-tag closable
|
||||
:disable-transitions="false"
|
||||
@close="handleClose(randomCover, cover)">
|
||||
{{cover}}
|
||||
</el-tag>
|
||||
<div>
|
||||
<el-image lazy class="table-td-thumb"
|
||||
style="margin: 10px"
|
||||
:preview-src-list="[cover]"
|
||||
:src="cover"
|
||||
fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-input
|
||||
class="input-new-tag"
|
||||
v-if="inputRandomCoverVisible"
|
||||
v-model="inputRandomCoverValue"
|
||||
ref="saveRandomCoverInput"
|
||||
size="small"
|
||||
@keyup.enter.native="handleInputRandomCoverConfirm"
|
||||
@blur="handleInputRandomCoverConfirm">
|
||||
</el-input>
|
||||
<el-button v-else class="button-new-tag" size="small" @click="showRandomCoverInput">+ 随机封面</el-button>
|
||||
<uploadPicture :isAdmin="true" :prefix="'randomCover'" style="margin: 10px" @addPicture="addRandomCover"
|
||||
:maxSize="2"
|
||||
:maxNumber="5"></uploadPicture>
|
||||
<div class="myCenter" style="margin-bottom: 40px">
|
||||
<el-button type="primary" @click="saveRandomCover()">保存随机封面</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-button type="danger" @click="resetForm('ruleForm')">重置所有修改</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const uploadPicture = () => import( "../common/uploadPicture");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uploadPicture
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disabled: true,
|
||||
types: ['', 'success', 'info', 'danger', 'warning'],
|
||||
inputNoticeVisible: false,
|
||||
inputNoticeValue: "",
|
||||
inputRandomNameVisible: false,
|
||||
inputRandomNameValue: "",
|
||||
inputRandomAvatarVisible: false,
|
||||
inputRandomAvatarValue: "",
|
||||
inputRandomCoverVisible: false,
|
||||
inputRandomCoverValue: "",
|
||||
webInfo: {
|
||||
id: null,
|
||||
webName: "",
|
||||
webTitle: "",
|
||||
footer: "",
|
||||
backgroundImage: "",
|
||||
avatar: "",
|
||||
waifuJson: "",
|
||||
status: false
|
||||
},
|
||||
notices: [],
|
||||
randomAvatar: [],
|
||||
randomName: [],
|
||||
randomCover: [],
|
||||
rules: {
|
||||
webName: [
|
||||
{required: true, message: '请输入网站名称', trigger: 'blur'},
|
||||
{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'change'}
|
||||
],
|
||||
webTitle: [
|
||||
{required: true, message: '请输入网站标题', trigger: 'blur'}
|
||||
],
|
||||
footer: [
|
||||
{required: true, message: '请输入页脚', trigger: 'blur'}
|
||||
],
|
||||
backgroundImage: [
|
||||
{required: true, message: '请输入背景', trigger: 'change'}
|
||||
],
|
||||
status: [
|
||||
{required: true, message: '请设置网站状态', trigger: 'change'}
|
||||
],
|
||||
avatar: [
|
||||
{required: true, message: '请上传头像', trigger: 'change'}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getWebInfo();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
addBackgroundImage(res) {
|
||||
this.webInfo.backgroundImage = res;
|
||||
},
|
||||
addAvatar(res) {
|
||||
this.webInfo.avatar = res;
|
||||
},
|
||||
addRandomAvatar(res) {
|
||||
this.randomAvatar.push(res);
|
||||
},
|
||||
addRandomCover(res) {
|
||||
this.randomCover.push(res);
|
||||
},
|
||||
changeWebStatus(webInfo) {
|
||||
this.$http.post(this.$constant.baseURL + "/webInfo/updateWebInfo", {
|
||||
id: webInfo.id,
|
||||
status: webInfo.status
|
||||
}, true)
|
||||
.then((res) => {
|
||||
this.getWebInfo();
|
||||
this.$message({
|
||||
message: "保存成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
getWebInfo() {
|
||||
this.$http.get(this.$constant.baseURL + "/admin/webInfo/getAdminWebInfo", {}, true)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.webInfo.id = res.data.id;
|
||||
this.webInfo.webName = res.data.webName;
|
||||
this.webInfo.webTitle = res.data.webTitle;
|
||||
this.webInfo.footer = res.data.footer;
|
||||
this.webInfo.backgroundImage = res.data.backgroundImage;
|
||||
this.webInfo.avatar = res.data.avatar;
|
||||
this.webInfo.waifuJson = res.data.waifuJson;
|
||||
this.webInfo.status = res.data.status;
|
||||
this.notices = JSON.parse(res.data.notices);
|
||||
this.randomAvatar = JSON.parse(res.data.randomAvatar);
|
||||
this.randomName = JSON.parse(res.data.randomName);
|
||||
this.randomCover = JSON.parse(res.data.randomCover);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.updateWebInfo(this.webInfo)
|
||||
} else {
|
||||
this.$message({
|
||||
message: "请完善必填项！",
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
this.getWebInfo();
|
||||
},
|
||||
handleClose(array, item) {
|
||||
array.splice(array.indexOf(item), 1);
|
||||
},
|
||||
handleInputNoticeConfirm() {
|
||||
if (this.inputNoticeValue) {
|
||||
this.notices.push(this.inputNoticeValue);
|
||||
}
|
||||
this.inputNoticeVisible = false;
|
||||
this.inputNoticeValue = '';
|
||||
},
|
||||
showNoticeInput() {
|
||||
this.inputNoticeVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveNoticeInput.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
saveNotice() {
|
||||
let param = {
|
||||
id: this.webInfo.id,
|
||||
notices: JSON.stringify(this.notices)
|
||||
}
|
||||
this.updateWebInfo(param);
|
||||
},
|
||||
handleInputRandomNameConfirm() {
|
||||
if (this.inputRandomNameValue) {
|
||||
this.randomName.push(this.inputRandomNameValue);
|
||||
}
|
||||
this.inputRandomNameVisible = false;
|
||||
this.inputRandomNameValue = '';
|
||||
},
|
||||
showRandomNameInput() {
|
||||
this.inputRandomNameVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveRandomNameInput.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
saveRandomName() {
|
||||
let param = {
|
||||
id: this.webInfo.id,
|
||||
randomName: JSON.stringify(this.randomName)
|
||||
}
|
||||
this.updateWebInfo(param);
|
||||
},
|
||||
handleInputRandomAvatarConfirm() {
|
||||
if (this.inputRandomAvatarValue) {
|
||||
this.randomAvatar.push(this.inputRandomAvatarValue);
|
||||
}
|
||||
this.inputRandomAvatarVisible = false;
|
||||
this.inputRandomAvatarValue = '';
|
||||
},
|
||||
showRandomAvatarInput() {
|
||||
this.inputRandomAvatarVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveRandomAvatarInput.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
saveRandomAvatar() {
|
||||
let param = {
|
||||
id: this.webInfo.id,
|
||||
randomAvatar: JSON.stringify(this.randomAvatar)
|
||||
}
|
||||
this.updateWebInfo(param);
|
||||
},
|
||||
handleInputRandomCoverConfirm() {
|
||||
if (this.inputRandomCoverValue) {
|
||||
this.randomCover.push(this.inputRandomCoverValue);
|
||||
}
|
||||
this.inputRandomCoverVisible = false;
|
||||
this.inputRandomCoverValue = '';
|
||||
},
|
||||
showRandomCoverInput() {
|
||||
this.inputRandomCoverVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveRandomCoverInput.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
saveRandomCover() {
|
||||
let param = {
|
||||
id: this.webInfo.id,
|
||||
randomCover: JSON.stringify(this.randomCover)
|
||||
}
|
||||
this.updateWebInfo(param);
|
||||
},
|
||||
updateWebInfo(value) {
|
||||
this.$confirm('确认保存？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.post(this.$constant.baseURL + "/webInfo/updateWebInfo", value, true)
|
||||
.then((res) => {
|
||||
this.getWebInfo();
|
||||
this.$message({
|
||||
message: "保存成功！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消保存!'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.my-tag {
|
||||
width: 100%!important;
|
||||
max-width: 100%!important;
|
||||
text-align: left;
|
||||
background: var(--lightYellow);
|
||||
border: none;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
color: var(--black);
|
||||
margin: 10px 0 20px!important;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
max-width: calc(100% - 20px);
|
||||
white-space: unset;
|
||||
height: unset;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.button-new-tag {
|
||||
margin: 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.input-new-tag {
|
||||
max-width: calc(100% - 20px);
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.my-icon {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.table-td-thumb {
|
||||
border-radius: 2px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
</style>
|
||||
106
src/components/admin/welcome.vue
Normal file
106
src/components/admin/welcome.vue
Normal file
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="welcome-title">
|
||||
<h2 class="playful">
|
||||
<span>欢</span>
|
||||
<span>迎</span>
|
||||
<span>光</span>
|
||||
<span>临</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.welcome-title {
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.playful span {
|
||||
position: relative;
|
||||
color: #5362f6;
|
||||
text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,
|
||||
1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,
|
||||
2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,
|
||||
3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,
|
||||
4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,
|
||||
5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,
|
||||
6px 6px #e485f8;
|
||||
animation: scatter 1.75s infinite;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.playful span:nth-child(2n) {
|
||||
color: #ed625c;
|
||||
text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063, 0.75px 0.75px #f2a063,
|
||||
1px 1px #f2a063, 1.25px 1.25px #f2a063, 1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063,
|
||||
2px 2px #f2a063, 2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,
|
||||
3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063, 3.75px 3.75px #f2a063,
|
||||
4px 4px #f2a063, 4.25px 4.25px #f2a063, 4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063,
|
||||
5px 5px #f2a063, 5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,
|
||||
6px 6px #f2a063;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.playful span:nth-child(3n) {
|
||||
color: #ffd913;
|
||||
text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9, 0.75px 0.75px #6ec0a9,
|
||||
1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9, 1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9,
|
||||
2px 2px #6ec0a9, 2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,
|
||||
3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9, 3.75px 3.75px #6ec0a9,
|
||||
4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9, 4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9,
|
||||
5px 5px #6ec0a9, 5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,
|
||||
6px 6px #6ec0a9;
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
|
||||
.playful span:nth-child(5n) {
|
||||
color: #555bff;
|
||||
text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,
|
||||
1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,
|
||||
2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,
|
||||
3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,
|
||||
4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,
|
||||
5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,
|
||||
6px 6px #e485f8;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.playful span:nth-child(7n) {
|
||||
color: #ff9c55;
|
||||
text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555, 0.75px 0.75px #ff5555,
|
||||
1px 1px #ff5555, 1.25px 1.25px #ff5555, 1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555,
|
||||
2px 2px #ff5555, 2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,
|
||||
3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555, 3.75px 3.75px #ff5555,
|
||||
4px 4px #ff5555, 4.25px 4.25px #ff5555, 4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555,
|
||||
5px 5px #ff5555, 5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,
|
||||
6px 6px #ff5555;
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
</style>
|
||||
786
src/components/article.vue
Normal file
786
src/components/article.vue
Normal file
@ -0,0 +1,786 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="!$common.isEmpty(article)">
|
||||
<!-- 封面 -->
|
||||
<div class="article-head my-animation-slide-top">
|
||||
<!-- 背景图片 -->
|
||||
<el-image class="article-image my-el-image"
|
||||
v-once
|
||||
lazy
|
||||
:src="article.articleCover"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot">
|
||||
<div class="article-image"></div>
|
||||
</div>
|
||||
</el-image>
|
||||
<!-- 文章信息 -->
|
||||
<div class="article-info-container">
|
||||
<div class="article-title">{{ article.articleTitle }}</div>
|
||||
<div class="article-info">
|
||||
<svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
|
||||
<path
|
||||
d="M510.4 65.5l259.69999999 0 1e-8 266.89999999c0 147.50000001-116.2 266.89999999-259.7 266.90000001-143.4 0-259.7-119.5-259.7-266.90000001 0.1-147.5 116.3-266.9 259.7-266.89999999z"
|
||||
fill="#FF9FCF"></path>
|
||||
<path
|
||||
d="M698.4 525.2l-13 0c53-48.4 86.5-117.8 86.5-195.20000001 0-10.2-0.7-20.3-1.8-30.19999999C613.8 377.50000001 438.6 444.9 266 437.7c15 33.4 36.7 63.1 63.5 87.5l-5.3 0c-122.6 0-225.5 88.1-248.8 204.1C340 677.2 597.7 609.2 862.2 585.7c-44.3-37.6-101.5-60.5-163.8-60.5z"
|
||||
fill="#FF83BB"></path>
|
||||
<path
|
||||
d="M862.2 585.7C597.7 609.2 340 677.2 75.4 729.3c-3.2 16.1-5 32.6-5 49.6 0 99.8 81.7 181.5 181.5 181.5l518.6 0c99.8 0 181.5-81.7 181.5-181.5 0.1-77.2-35-146.5-89.8-193.2z"
|
||||
fill="#FF5390"></path>
|
||||
<path
|
||||
d="M770.1 299.8C755.1 168 643.3 65.5 507.4 65.5c-146.1 0-264.5 118.4-264.5 264.5 0 38.4 8.3 74.8 23.1 107.7 172.6 7.2 347.8-60.2 504.1-137.9z"
|
||||
fill="#FF9FCF"></path>
|
||||
<path
|
||||
d="M436.4 282.1c0 24.1-19.6 43.7-43.7 43.7S349 306.2 349 282.1s19.6-43.7 43.7-43.7c24.19999999 0 43.7 19.6 43.7 43.7z"
|
||||
fill="#FFFFFF"></path>
|
||||
<path d="M625 282.1m-43.7 0a43.7 43.7 0 1 0 87.4 0 43.7 43.7 0 1 0-87.4 0Z" fill="#FFFFFF"></path>
|
||||
</svg>
|
||||
<span> {{ article.username }}</span>
|
||||
<span>·</span>
|
||||
<svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
|
||||
<path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#409EFF"></path>
|
||||
<path
|
||||
d="M654.222222 256c-17.066667 0-28.444444 11.377778-28.444444 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444444 28.444445s28.444444-11.377778 28.444445-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444445-28.444444zM369.777778 256c-17.066667 0-28.444444 11.377778-28.444445 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444445 28.444445s28.444444-11.377778 28.444444-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444444-28.444444z"
|
||||
fill="#FFFFFF"></path>
|
||||
<path
|
||||
d="M725.333333 312.888889H711.111111v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-170.666666v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-14.222222c-22.755556 0-42.666667 19.911111-42.666667 42.666667v341.333333c0 22.755556 19.911111 42.666667 42.666667 42.666667h426.666666c22.755556 0 42.666667-19.911111 42.666667-42.666667v-341.333333c0-22.755556-19.911111-42.666667-42.666667-42.666667zM426.666667 654.222222h-56.888889c-17.066667 0-28.444444-11.377778-28.444445-28.444444s11.377778-28.444444 28.444445-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444444 28.444445s-11.377778 28.444444-28.444444 28.444444z m227.555555 0h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444445s-11.377778 28.444444-28.444445 28.444444z m0-113.777778h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444444h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444444s-11.377778 28.444444-28.444445 28.444444z"
|
||||
fill="#FFFFFF"></path>
|
||||
</svg>
|
||||
<span> {{ article.createTime }}</span>
|
||||
<span>·</span>
|
||||
<svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
|
||||
<path d="M14.656 512a497.344 497.344 0 1 0 994.688 0 497.344 497.344 0 1 0-994.688 0z"
|
||||
fill="#FF0000"></path>
|
||||
<path
|
||||
d="M374.976 872.64c-48.299-100.032-22.592-157.44 14.421-211.37 40.448-58.966 51.115-117.611 51.115-117.611s31.659 41.386 19.115 106.005c56.149-62.72 66.816-162.133 58.325-200.405 127.317 88.746 181.59 281.002 108.181 423.381C1016 652.501 723.093 323.2 672.277 285.867c16.939 37.333 20.054 100.032-14.101 130.474-58.027-219.84-201.664-265.002-201.664-265.002 16.96 113.536-61.781 237.397-137.344 330.24-2.816-45.163-5.632-76.544-29.483-119.808-5.333 82.176-68.373 149.269-85.29 231.445-22.912 111.637 17.237 193.173 170.581 279.424z"
|
||||
fill="#FFFFFF"></path>
|
||||
</svg>
|
||||
<span> {{ article.viewCount }}</span>
|
||||
<span>·</span>
|
||||
<svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
|
||||
<path
|
||||
d="M113.834667 291.84v449.194667a29.013333 29.013333 0 0 0 28.842666 29.013333h252.928v90.453333l160.597334-90.453333h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333h-665.6a29.013333 29.013333 0 0 0-29.696 29.013333z"
|
||||
fill="#FFDEAD"></path>
|
||||
<path
|
||||
d="M809.130667 262.826667h-665.6a29.013333 29.013333 0 0 0-28.842667 29.013333v40.106667a29.013333 29.013333 0 0 1 28.842667-29.013334h665.6a29.013333 29.013333 0 0 1 29.013333 29.013334V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333z"
|
||||
fill="#FFF3DB"></path>
|
||||
<path
|
||||
d="M556.202667 770.048h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V362.837333s-59.733333 392.533333-724.309333 314.709334v63.488a29.013333 29.013333 0 0 0 28.842666 29.013333h253.098667v90.453333z"
|
||||
fill="#F2C182"></path>
|
||||
<path
|
||||
d="M619.008 632.32l101.888-35.157333-131.754667-76.117334 29.866667 111.274667zM891.904 148.992a61.44 61.44 0 0 0-84.138667 22.528l-19.968 34.133333 106.666667 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-22.528-84.138667z"
|
||||
fill="#69BAF9"></path>
|
||||
<path d="M775.338667 198.775467l131.669333 76.032-186.026667 322.218666-131.6864-76.032z"
|
||||
fill="#F7FBFF"></path>
|
||||
<path
|
||||
d="M775.168 198.826667l-5.290667 9.216 59.221334 34.133333a34.133333 34.133333 0 0 1 12.458666 46.592l-139.946666 242.346667a34.133333 34.133333 0 0 1-46.762667 12.629333l-59.050667-34.133333-6.656 11.434666 88.746667 51.2L720.896 597.333333l186.026667-322.56z"
|
||||
fill="#D8E3F0"></path>
|
||||
<path
|
||||
d="M616.448 622.592l2.56 9.728 101.888-35.157333-44.885333-25.941334-59.562667 51.370667zM891.904 148.992c-1.024 0-2.218667-0.853333-3.242667-1.536A61.610667 61.610667 0 0 1 887.466667 204.8l-19.968 34.133333-73.728-42.496-5.12 8.704 106.666666 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-23.381333-83.626667z"
|
||||
fill="#599ED4"></path>
|
||||
<path
|
||||
d="M265.898667 417.621333H494.933333a17.066667 17.066667 0 1 0 0-34.133333H265.898667a17.066667 17.066667 0 1 0 0 34.133333zM265.898667 533.504H494.933333a17.066667 17.066667 0 0 0 0-34.133333H265.898667a17.066667 17.066667 0 0 0 0 34.133333z"
|
||||
fill="#3D3D63"></path>
|
||||
<path
|
||||
d="M959.488 354.645333a99.84 99.84 0 0 0-23.722667-127.488 78.677333 78.677333 0 0 0-142.848-64.170666l-11.605333 20.138666a17.066667 17.066667 0 0 0-20.821333 7.168l-32.085334 55.466667H142.677333a46.250667 46.250667 0 0 0-45.909333 46.08v449.194667a46.08 46.08 0 0 0 45.909333 46.08h236.032v73.386666a17.066667 17.066667 0 0 0 8.362667 14.848 17.066667 17.066667 0 0 0 8.704 2.218667 17.066667 17.066667 0 0 0 8.362667-2.218667l156.672-88.234666h248.32a46.08 46.08 0 0 0 46.08-46.08V398.677333L921.6 283.306667a17.066667 17.066667 0 0 0-4.266667-21.504l1.877334-3.413334a65.365333 65.365333 0 0 1 10.410666 79.189334l-53.077333 91.989333a56.832 56.832 0 0 0 20.821333 77.653333 17.066667 17.066667 0 0 0 24.234667-6.314666 17.066667 17.066667 0 0 0-6.997333-23.04 23.04 23.04 0 0 1-8.362667-31.061334z m-138.410667 386.389334a11.946667 11.946667 0 0 1-11.946666 11.946666H556.202667a17.066667 17.066667 0 0 0-8.362667 2.218667l-134.997333 76.117333v-61.269333a17.066667 17.066667 0 0 0-17.066667-17.066667H142.677333a11.946667 11.946667 0 0 1-11.776-11.946666V291.84a11.946667 11.946667 0 0 1 11.776-11.946667h565.930667L574.464 512a17.066667 17.066667 0 0 0-1.706667 12.970667L597.333333 615.253333H265.898667a17.066667 17.066667 0 1 0 0 34.133334h352.938666a17.066667 17.066667 0 0 0 5.802667 0l102.4-35.328a17.066667 17.066667 0 0 0 9.216-7.509334l85.333333-147.968z m-204.8-184.661334l63.829334 36.864-49.322667 17.066667z m206.848-170.666666v1.365333l-108.373333 186.709333-102.4-59.050666L781.482667 221.866667l102.4 59.050666z m76.458667-161.28L887.466667 244.224l-76.970667-44.373333 11.264-19.797334a44.544 44.544 0 1 1 77.141333 44.544z"
|
||||
fill="#3D3D63"></path>
|
||||
</svg>
|
||||
<span> {{ article.commentCount }}</span>
|
||||
<span>·</span>
|
||||
<svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
|
||||
<path
|
||||
d="M510.671749 348.792894S340.102978 48.827055 134.243447 254.685563C-97.636714 486.565724 510.671749 913.435858 510.671749 913.435858s616.107079-419.070494 376.428301-658.749272c-194.095603-194.096626-376.428302 94.106308-376.428301 94.106308z"
|
||||
fill="#FF713C"></path>
|
||||
<path
|
||||
d="M510.666632 929.674705c-3.267417 0-6.534833-0.983397-9.326413-2.950192-16.924461-11.872399-414.71121-293.557896-435.220312-529.448394-5.170766-59.482743 13.879102-111.319341 56.643068-154.075121 51.043536-51.043536 104.911398-76.930113 160.095231-76.930114 112.524796 0 196.878996 106.48115 228.475622 153.195078 33.611515-45.214784 122.406864-148.20646 234.04343-148.20646 53.930283 0 105.46603 24.205285 153.210428 71.941496 45.063335 45.063335 64.954361 99.200326 59.133795 160.920016C935.306982 641.685641 536.758893 915.327952 519.80271 926.859589a16.205077 16.205077 0 0 1-9.136078 2.815116zM282.857183 198.75574c-46.25344 0-92.396363 22.682605-137.127124 67.413365-36.149315 36.157501-51.614541 78.120218-47.25321 128.291898 17.575284 202.089671 352.199481 455.119525 412.332023 499.049037 60.434417-42.86732 395.406538-289.147446 414.567947-492.458945 4.933359-52.344159-11.341303-96.465029-49.759288-134.88199-41.431621-41.423435-85.24243-62.424748-130.242319-62.424748-122.041544 0-220.005716 152.203494-220.989114 153.742547-3.045359 4.806469-8.53335 7.883551-14.101159 7.534603a16.257266 16.257266 0 0 1-13.736863-8.184403c-0.902556-1.587148-91.569532-158.081365-213.690893-158.081364z"
|
||||
fill="#885F44"></path>
|
||||
</svg>
|
||||
<span> {{ article.likeCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-info-news"
|
||||
@click="weiYanDialogVisible = true"
|
||||
v-if="!$common.isEmpty($store.state.currentUser) && $store.state.currentUser.id === article.userId">
|
||||
<svg width="30" height="30" viewBox="0 0 1024 1024">
|
||||
<path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01"></path>
|
||||
<path
|
||||
d="M989.866667 512c0 263.918933-213.947733 477.866667-477.866667 477.866667S34.133333 775.918933 34.133333 512 248.081067 34.133333 512 34.133333s477.866667 213.947733 477.866667 477.866667z"
|
||||
fill="#FF7744"></path>
|
||||
<path
|
||||
d="M512 221.866667A51.2 51.2 0 0 1 563.2 273.066667v187.733333H750.933333a51.2 51.2 0 0 1 0 102.4h-187.733333V750.933333a51.2 51.2 0 0 1-102.4 0v-187.733333H273.066667a51.2 51.2 0 0 1 0-102.4h187.733333V273.066667A51.2 51.2 0 0 1 512 221.866667z"
|
||||
fill="#FFFFFF"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 文章 -->
|
||||
<div style="background: var(--background);">
|
||||
<div class="article-container my-animation-slide-bottom">
|
||||
<div v-if="!$common.isEmpty(article.videoUrl)" style="margin-bottom: 20px">
|
||||
<videoPlayer :url="{src: $common.decrypt(article.videoUrl)}"
|
||||
:cover="article.articleCover">
|
||||
</videoPlayer>
|
||||
</div>
|
||||
|
||||
<!-- 最新进展 -->
|
||||
<div v-if="!$common.isEmpty(treeHoleList)" class="process-wrap">
|
||||
<el-collapse accordion value="1">
|
||||
<el-collapse-item title="最新进展" name="1">
|
||||
<process :treeHoleList="treeHoleList" @deleteTreeHole="deleteTreeHole"></process>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<div v-html="articleContentHtml" class="entry-content"></div>
|
||||
<!-- 最后更新时间 -->
|
||||
<div class="article-update-time">
|
||||
<span>文章最后更新于 {{ article.updateTime }}</span>
|
||||
</div>
|
||||
<!-- 分类 -->
|
||||
<div class="article-sort">
|
||||
<span @click="$router.push({path: '/sort', query: {sortId: article.sortId, labelId: article.labelId}})">{{ article.sort.sortName +" ▶ "+ article.label.labelName}}</span>
|
||||
</div>
|
||||
<!-- 作者信息 -->
|
||||
<blockquote>
|
||||
<div>
|
||||
作者：{{article.username}}
|
||||
</div>
|
||||
<div>
|
||||
<span>版权&许可请详阅</span>
|
||||
<span style="color: #38f;cursor: pointer"
|
||||
@click="copyrightDialogVisible = true">
|
||||
版权声明
|
||||
</span>
|
||||
</div>
|
||||
</blockquote>
|
||||
<!-- 订阅 -->
|
||||
<div class="myCenter" id="article-like" @click="subscribeLabel()">
|
||||
<i class="el-icon-thumb article-like-icon" :class="{'article-like': subscribe}"></i>
|
||||
</div>
|
||||
|
||||
<!-- 评论 -->
|
||||
<div v-if="article.commentStatus === true">
|
||||
<comment :type="'article'" :source="article.id" :userId="article.userId"></comment>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toc" class="toc"></div>
|
||||
</div>
|
||||
|
||||
<div style="background: var(--background)">
|
||||
<myFooter></myFooter>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog title="版权声明"
|
||||
:visible.sync="copyrightDialogVisible"
|
||||
width="80%"
|
||||
:append-to-body="true"
|
||||
class="article-copy"
|
||||
center>
|
||||
<div style="display: flex;align-items: center;flex-direction: column">
|
||||
<el-avatar shape="square" :size="35" :src="$store.state.webInfo.avatar"></el-avatar>
|
||||
<div class="copyright-container">
|
||||
<p>
|
||||
{{ $store.state.webInfo.webName }}是指运行在{{ $constant.host }}域名及相关子域名上的网站，本条款描述了{{ $store.state.webInfo.webName }}的网站版权声明：
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
{{ $store.state.webInfo.webName }}提供的所有文章、展示的图片素材等内容部分来源于互联网平台，仅供学习参考。如有侵犯您的版权，请联系{{ $store.state.webInfo.webName }}负责人，{{ $store.state.webInfo.webName }}承诺将在一个工作日内改正。
|
||||
</li>
|
||||
<li>
|
||||
{{ $store.state.webInfo.webName }}不保证网站内容的全部准确性、安全性和完整性，请您在阅读、下载及使用过程中自行确认，{{ $store.state.webInfo.webName }}亦不承担上述资源对您造成的任何形式的损失或伤害。
|
||||
</li>
|
||||
<li>未经{{ $store.state.webInfo.webName }}允许，不得盗链、盗用本站内容和资源。</li>
|
||||
<li>
|
||||
{{ $store.state.webInfo.webName }}旨在为广大用户提供更多的信息；{{ $store.state.webInfo.webName }}不保证向用户提供的外部链接的准确性和完整性，该外部链接指向的不由本站实际控制的任何网页上的内容，{{ $store.state.webInfo.webName }}对其合法性亦概不负责，亦不承担任何法律责任。
|
||||
</li>
|
||||
<li>
|
||||
{{ $store.state.webInfo.webName }}中的文章/视频（包括转载文章/视频）的版权仅归原作者所有，若作者有版权声明或文章从其它网站转载而附带有原所有站的版权声明者，其版权归属以附带声明为准；文章仅代表作者本人的观点，与{{ $store.state.webInfo.webName }}立场无关。
|
||||
</li>
|
||||
<li>
|
||||
{{ $store.state.webInfo.webName }}自行编写排版的文章均采用
|
||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" style="color: #38f;text-decoration: none;">
|
||||
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
许可协议标识：
|
||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
|
||||
<img alt="知识共享许可协议"
|
||||
src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png"
|
||||
style="margin-top: 5px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="最新进展"
|
||||
:visible.sync="weiYanDialogVisible"
|
||||
width="40%"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
center>
|
||||
<div>
|
||||
<div class="myCenter" style="margin-bottom: 20px">
|
||||
<el-date-picker
|
||||
v-model="newsTime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="datetime"
|
||||
align="center"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<commentBox :disableGraffiti="true"
|
||||
@submitComment="submitWeiYan">
|
||||
</commentBox>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 微信 -->
|
||||
<el-dialog title="密码"
|
||||
:modal="false"
|
||||
:visible.sync="showPasswordDialog"
|
||||
width="25%"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
center>
|
||||
<div>
|
||||
<div>
|
||||
<div class="password-content">{{tips}}</div>
|
||||
</div>
|
||||
<div style="margin: 20px auto">
|
||||
<el-input maxlength="30" v-model="password"></el-input>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center">
|
||||
<proButton :info="'提交'"
|
||||
@click.native="submitPassword()"
|
||||
:before="$constant.before_color_2"
|
||||
:after="$constant.after_color_2">
|
||||
</proButton>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const myFooter = () => import( "./common/myFooter");
|
||||
const comment = () => import( "./comment/comment");
|
||||
const process = () => import( "./common/process");
|
||||
const commentBox = () => import( "./comment/commentBox");
|
||||
const proButton = () => import( "./common/proButton");
|
||||
const videoPlayer = () => import( "./common/videoPlayer");
|
||||
import MarkdownIt from 'markdown-it';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
myFooter,
|
||||
comment,
|
||||
commentBox,
|
||||
proButton,
|
||||
process,
|
||||
videoPlayer
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
id: this.$route.params.id,
|
||||
subscribe: false,
|
||||
article: {},
|
||||
articleContentHtml: "",
|
||||
treeHoleList: [],
|
||||
weiYanDialogVisible: false,
|
||||
copyrightDialogVisible: false,
|
||||
newsTime: "",
|
||||
showPasswordDialog: false,
|
||||
password: "",
|
||||
tips: "",
|
||||
scrollTop: 0
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (!this.$common.isEmpty(this.id)) {
|
||||
this.getArticle(localStorage.getItem("article_password_" + this.id));
|
||||
|
||||
if ("0" !== localStorage.getItem("showSubscribe")) {
|
||||
this.$notify({
|
||||
title: '文章订阅',
|
||||
type: 'success',
|
||||
message: '点击文章下方小手 - 订阅/取消订阅专栏（标签）',
|
||||
duration: 0,
|
||||
onClose: () => localStorage.setItem("showSubscribe", "0")
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("scroll", this.onScrollPage);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener("scroll", this.onScrollPage);
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
methods: {
|
||||
subscribeLabel() {
|
||||
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||
this.$message({
|
||||
message: "请先登录！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.$confirm('确认' + (this.subscribe ? '取消订阅' : '订阅') + '专栏【' + this.article.label.labelName + '】？' + (this.subscribe ? "" : "订阅专栏后，该专栏发布新文章将通过邮件通知订阅用户。"), this.subscribe ? "取消订阅" : "文章订阅", {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.get(this.$constant.baseURL + "/user/subscribe", {
|
||||
labelId: this.article.labelId,
|
||||
flag: !this.subscribe
|
||||
})
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.$store.commit("loadCurrentUser", res.data);
|
||||
}
|
||||
this.subscribe = !this.subscribe;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消!'
|
||||
});
|
||||
});
|
||||
},
|
||||
submitPassword() {
|
||||
if (this.$common.isEmpty(this.password)) {
|
||||
this.$message({
|
||||
message: "请先输入密码！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.getArticle(this.password);
|
||||
},
|
||||
deleteTreeHole(id) {
|
||||
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||
this.$message({
|
||||
message: "请先登录！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.$confirm('确认删除？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.get(this.$constant.baseURL + "/weiYan/deleteWeiYan", {id: id})
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
this.getNews();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消删除!'
|
||||
});
|
||||
});
|
||||
},
|
||||
submitWeiYan(content) {
|
||||
let weiYan = {
|
||||
content: content,
|
||||
createTime: this.newsTime,
|
||||
source: this.article.id
|
||||
};
|
||||
|
||||
this.$http.post(this.$constant.baseURL + "/weiYan/saveNews", weiYan)
|
||||
.then((res) => {
|
||||
this.weiYanDialogVisible = false;
|
||||
this.newsTime = "";
|
||||
this.getNews();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
getNews() {
|
||||
this.$http.post(this.$constant.baseURL + "/weiYan/listNews", {
|
||||
current: 1,
|
||||
size: 9999,
|
||||
source: this.article.id
|
||||
})
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
res.data.records.forEach(c => {
|
||||
c.content = c.content.replace(/\n{2,}/g, '<div style="height: 12px"></div>');
|
||||
c.content = c.content.replace(/\n/g, '<br/>');
|
||||
c.content = this.$common.faceReg(c.content);
|
||||
c.content = this.$common.pictureReg(c.content);
|
||||
});
|
||||
this.treeHoleList = res.data.records;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
onScrollPage() {
|
||||
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
if (this.scrollTop < (window.innerHeight / 4)) {
|
||||
$(".toc").css("top", window.innerHeight / 4);
|
||||
} else {
|
||||
$(".toc").css("top", "90px");
|
||||
}
|
||||
},
|
||||
getTocbot() {
|
||||
let script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = this.$constant.tocbot;
|
||||
document.getElementsByTagName('head')[0].appendChild(script);
|
||||
|
||||
// 引入成功
|
||||
script.onload = function () {
|
||||
tocbot.init({
|
||||
tocSelector: '#toc',
|
||||
contentSelector: '.entry-content',
|
||||
headingSelector: 'h1, h2, h3, h4, h5',
|
||||
scrollSmooth: true,
|
||||
fixedSidebarOffset: 'auto',
|
||||
scrollSmoothOffset: -100,
|
||||
hasInnerContainers: false
|
||||
});
|
||||
}
|
||||
if (this.$common.mobile()) {
|
||||
$(".toc").css("display", "none");
|
||||
}
|
||||
},
|
||||
addId() {
|
||||
let headings = $(".entry-content").find("h1, h2, h3, h4, h5, h6");
|
||||
headings.attr('id', (i, id) => id || 'toc-' + i);
|
||||
},
|
||||
getArticle(password) {
|
||||
this.$http.get(this.$constant.baseURL + "/article/getArticleById", {id: this.id, viewValue: password})
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.article = res.data;
|
||||
this.getNews();
|
||||
const md = new MarkdownIt({breaks: true}).use(require('markdown-it-multimd-table'));
|
||||
this.articleContentHtml = md.render(this.article.articleContent);
|
||||
this.$nextTick(() => {
|
||||
this.$common.imgShow(".entry-content img");
|
||||
this.highlight();
|
||||
this.addId();
|
||||
this.getTocbot();
|
||||
});
|
||||
if (!this.$common.isEmpty(password)) {
|
||||
localStorage.setItem("article_password_" + this.id, password);
|
||||
}
|
||||
this.showPasswordDialog = false;
|
||||
if (!this.$common.isEmpty(this.$store.state.currentUser) && !this.$common.isEmpty(this.$store.state.currentUser.subscribe)) {
|
||||
this.subscribe = JSON.parse(this.$store.state.currentUser.subscribe).includes(this.article.labelId);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
if ("密码错误" === error.message.substr(0, 4)) {
|
||||
if (!this.$common.isEmpty(password)) {
|
||||
localStorage.removeItem("article_password_" + this.id);
|
||||
this.$message({
|
||||
message: "密码错误，请重新输入！",
|
||||
type: "error",
|
||||
customClass: "message-index"
|
||||
});
|
||||
}
|
||||
this.tips = error.message.substr(4);
|
||||
this.showPasswordDialog = true;
|
||||
} else {
|
||||
this.$alert(error.message, '文章提示', {
|
||||
confirmButtonText: '确定'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
highlight() {
|
||||
let attributes = {
|
||||
autocomplete: "off",
|
||||
autocorrect: "off",
|
||||
autocapitalize: "off",
|
||||
spellcheck: "false",
|
||||
contenteditable: "false"
|
||||
};
|
||||
|
||||
$("pre").each(function (i, item) {
|
||||
let preCode = $(item).children("code");
|
||||
let classNameStr = preCode[0].className;
|
||||
let classNameArr = classNameStr.split(" ");
|
||||
|
||||
let lang = "";
|
||||
classNameArr.some(function (className) {
|
||||
if (className.indexOf("language-") > -1) {
|
||||
lang = className.substring(className.indexOf("-") + 1, className.length);
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
// 检测语言是否存在，不存在则自动检测
|
||||
let language = hljs.getLanguage(lang.toLowerCase());
|
||||
if (language === undefined) {
|
||||
// 启用自动检测
|
||||
let autoLanguage = hljs.highlightAuto(preCode.text());
|
||||
preCode.removeClass("language-" + lang);
|
||||
lang = autoLanguage.language;
|
||||
if (lang === undefined) {
|
||||
lang = "java";
|
||||
}
|
||||
preCode.addClass("language-" + lang);
|
||||
} else {
|
||||
lang = language.name;
|
||||
}
|
||||
|
||||
$(item).addClass("highlight-wrap");
|
||||
$(item).attr(attributes);
|
||||
preCode.attr("data-rel", lang.toUpperCase()).addClass(lang.toLowerCase());
|
||||
// 启用代码高亮
|
||||
hljs.highlightBlock(preCode[0]);
|
||||
// 启用代码行号
|
||||
hljs.lineNumbersBlock(preCode[0]);
|
||||
});
|
||||
|
||||
$("pre code").each(function (i, block) {
|
||||
$(block).attr({
|
||||
id: "hljs-" + i,
|
||||
});
|
||||
|
||||
$(block).after(
|
||||
'<a class="copy-code" href="javascript:" data-clipboard-target="#hljs-' +
|
||||
i +
|
||||
'"><i class="fa fa-clipboard" aria-hidden="true"></i></a>'
|
||||
);
|
||||
new ClipboardJS(".copy-code");
|
||||
});
|
||||
|
||||
if ($(".entry-content").children("table").length > 0) {
|
||||
$(".entry-content")
|
||||
.children("table")
|
||||
.wrap("<div class='table-wrapper'></div>");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.article-head {
|
||||
height: 40vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.article-image::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--miniMask);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.article-info-container {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 20%;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.article-info-news {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 20%;
|
||||
cursor: pointer;
|
||||
animation: scale 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 28px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.article-info {
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.article-info i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.article-info span:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.article-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.article-update-time {
|
||||
color: var(--greyFont);
|
||||
font-size: 12px;
|
||||
margin: 20px 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
line-height: 2;
|
||||
border-left: 0.2rem solid var(--blue);
|
||||
padding: 10px 1rem;
|
||||
background-color: var(--azure);
|
||||
border-radius: 4px;
|
||||
margin: 0 0 40px 0;
|
||||
user-select: none;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.article-sort {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-sort span {
|
||||
padding: 3px 10px;
|
||||
background-color: var(--themeBackground);
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
color: var(--white);
|
||||
transition: all 0.3s;
|
||||
margin-right: 25px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.article-sort span:hover {
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
.article-like {
|
||||
color: var(--red) !important;
|
||||
}
|
||||
|
||||
.article-like-icon {
|
||||
font-size: 60px;
|
||||
cursor: pointer;
|
||||
color: var(--greyFont);
|
||||
transition: all 0.5s;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-like-icon:hover {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.process-wrap {
|
||||
margin: 0 0 40px;
|
||||
}
|
||||
|
||||
.process-wrap hr {
|
||||
position: relative;
|
||||
margin: 10px auto 60px;
|
||||
border: 2px dashed var(--lightGreen);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.process-wrap hr:before {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
left: 5%;
|
||||
color: var(--lightGreen);
|
||||
content: '❄';
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
|
||||
.process-wrap hr:hover:before {
|
||||
left: calc(95% - 20px);
|
||||
}
|
||||
|
||||
.process-wrap >>> .el-collapse-item__header {
|
||||
border-bottom: unset;
|
||||
font-size: 20px;
|
||||
background-color: var(--background);
|
||||
color: var(--lightGreen);
|
||||
}
|
||||
|
||||
.process-wrap >>> .el-collapse-item__wrap {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.process-wrap .el-collapse {
|
||||
border-top: unset;
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
||||
.process-wrap >>> .el-collapse-item__wrap {
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
||||
.password-content {
|
||||
font-size: 13px;
|
||||
color: var(--maxGreyFont);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.copyright-container {
|
||||
color: var(--black);
|
||||
line-height: 2.5;
|
||||
padding: 0 30px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.article-info-container {
|
||||
left: 20px;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.article-info-news {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
349
src/components/articleList.vue
Normal file
349
src/components/articleList.vue
Normal file
@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<div v-if="!$common.isEmpty(articleList)" class="recent-post-container">
|
||||
<div class="article-first">
|
||||
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -2px;">
|
||||
<path
|
||||
d="M224.2 472.3c-13-5.7-3.7-23.5 8.2-19 91 34 146.8 108.7 182.4 138.5 5.6 4.7 14 2.9 17.3-3.5 16.8-32 45.8-113.7-57.1-168.6-87.3-46.5-188-53.6-247.3-82.2-14.5-7-31.1 4.6-29.9 20.7 5 69.7 28.9 124.7 62.3 181.5 67.3 114.3 140.6 132.9 216.6 104 2.2-0.9 4.5-1.8 7-3 7-3.4 8.3-12.9 2.5-18.1 0.1 0-45.7-69.3-162-150.3z"
|
||||
fill="#FFD401"></path>
|
||||
<path
|
||||
d="M282.7 849.9c79.5-137 172.4-263.1 385.4-401.3 9.8-6.4 2.1-21.5-8.9-17.4C497.7 492.8 429.7 585 373.3 640.8c-8.7 8.7-23.4 6.3-29.1-4.6-27.2-51.8-69.5-174.1 97.3-263.1 147.7-78.8 319.9-91.4 429.7-93.3 18.9-0.3 31.5 19.4 23.3 36.4C863.7 380 842.6 478 789.9 567.6 680.8 753.1 545.5 766.7 422.2 719.8c-8.8-3.4-18.8-0.2-24 7.7-16.6 25.2-50.3 80.1-58.7 122.4-11.4 56.8-82.2 43.9-56.8 0z"
|
||||
fill="#8BC03C"></path>
|
||||
<path
|
||||
d="M375 419.6c-30.1 28.2-45.8 57.7-52.4 86.1 40.6 32.4 70.2 67.7 92.1 85.9 1.2 1 2.5 1.6 3.9 2.1 6.5-6.7 13.3-13.7 20.4-20.7 15.2-37.9 25.3-105.7-64-153.4zM318.8 548.2c1.6 36.1 14.7 67.6 25.5 88.1 5.7 10.9 20.3 13.3 29.1 4.6 4.9-4.9 10-10 15.1-15.4-0.6-1-1.3-2-2.2-2.8 0-0.1-20.1-30.5-67.5-74.5z"
|
||||
fill="#8BA000"></path>
|
||||
</svg>
|
||||
发现
|
||||
</div>
|
||||
<div class="recent-post-item shadow-box background-opacity"
|
||||
v-for="(article, index) in articleList"
|
||||
:key="index"
|
||||
@click="$router.push({path: `/article/${article.id}`})">
|
||||
<!-- 封面 -->
|
||||
<div class="recent-post-item-image" :class="{ leftImage: index % 2 !== 0, rightImage: index % 2 === 0 }">
|
||||
<div class="image-container">
|
||||
<el-image class="my-el-image"
|
||||
v-once
|
||||
lazy
|
||||
:src="article.articleCover"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot myCenter" style="background-color: var(--lightGreen)">
|
||||
<div class="error-text">
|
||||
<div>遇事不决，可问春风</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-image>
|
||||
<div class="transformCenter hasVideo" v-if="article.hasVideo">
|
||||
<svg viewBox="0 0 1024 1024" width="60" height="60">
|
||||
<path
|
||||
d="M514 114.3c-219.9 0-398.9 178.9-398.9 398.9 0.1 219.9 179 398.8 398.9 398.8 219.9 0 398.8-178.9 398.8-398.8S733.9 114.3 514 114.3z m173 421.9L437.1 680.5c-17.7 10.2-39.8-2.6-39.8-23V368.9c0-20.4 22.1-33.2 39.8-23L687 490.2c17.7 10.2 17.7 35.8 0 46z"
|
||||
fill="#0C0C0C"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="recent-post-item-post" :class="{ leftImage: index % 2 === 0, rightImage: index % 2 !== 0 }">
|
||||
<!-- 时间 -->
|
||||
<div class="post-meta">
|
||||
<svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
|
||||
<path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#409EFF"></path>
|
||||
<path
|
||||
d="M654.222222 256c-17.066667 0-28.444444 11.377778-28.444444 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444444 28.444445s28.444444-11.377778 28.444445-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444445-28.444444zM369.777778 256c-17.066667 0-28.444444 11.377778-28.444445 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444445 28.444445s28.444444-11.377778 28.444444-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444444-28.444444z"
|
||||
fill="#FFFFFF"></path>
|
||||
<path
|
||||
d="M725.333333 312.888889H711.111111v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-170.666666v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-14.222222c-22.755556 0-42.666667 19.911111-42.666667 42.666667v341.333333c0 22.755556 19.911111 42.666667 42.666667 42.666667h426.666666c22.755556 0 42.666667-19.911111 42.666667-42.666667v-341.333333c0-22.755556-19.911111-42.666667-42.666667-42.666667zM426.666667 654.222222h-56.888889c-17.066667 0-28.444444-11.377778-28.444445-28.444444s11.377778-28.444444 28.444445-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444444 28.444445s-11.377778 28.444444-28.444444 28.444444z m227.555555 0h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444445s-11.377778 28.444444-28.444445 28.444444z m0-113.777778h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444444h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444444s-11.377778 28.444444-28.444445 28.444444z"
|
||||
fill="#FFFFFF"></path>
|
||||
</svg>
|
||||
发布于 {{ article.createTime }}
|
||||
</div>
|
||||
<!-- 标题 -->
|
||||
|
||||
<el-tooltip placement="top" effect="light">
|
||||
<div slot="content">{{ article.articleTitle }}</div>
|
||||
<h3>{{ article.articleTitle }}</h3>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 信息 -->
|
||||
<div class="post-meta" style="margin-bottom: 15px">
|
||||
<span>
|
||||
<svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
|
||||
<path d="M14.656 512a497.344 497.344 0 1 0 994.688 0 497.344 497.344 0 1 0-994.688 0z"
|
||||
fill="#FF0000"></path>
|
||||
<path
|
||||
d="M374.976 872.64c-48.299-100.032-22.592-157.44 14.421-211.37 40.448-58.966 51.115-117.611 51.115-117.611s31.659 41.386 19.115 106.005c56.149-62.72 66.816-162.133 58.325-200.405 127.317 88.746 181.59 281.002 108.181 423.381C1016 652.501 723.093 323.2 672.277 285.867c16.939 37.333 20.054 100.032-14.101 130.474-58.027-219.84-201.664-265.002-201.664-265.002 16.96 113.536-61.781 237.397-137.344 330.24-2.816-45.163-5.632-76.544-29.483-119.808-5.333 82.176-68.373 149.269-85.29 231.445-22.912 111.637 17.237 193.173 170.581 279.424z"
|
||||
fill="#FFFFFF"></path>
|
||||
</svg> {{ article.viewCount }} 热度
|
||||
</span>
|
||||
<span>
|
||||
<svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
|
||||
<path
|
||||
d="M113.834667 291.84v449.194667a29.013333 29.013333 0 0 0 28.842666 29.013333h252.928v90.453333l160.597334-90.453333h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333h-665.6a29.013333 29.013333 0 0 0-29.696 29.013333z"
|
||||
fill="#FFDEAD"></path>
|
||||
<path
|
||||
d="M809.130667 262.826667h-665.6a29.013333 29.013333 0 0 0-28.842667 29.013333v40.106667a29.013333 29.013333 0 0 1 28.842667-29.013334h665.6a29.013333 29.013333 0 0 1 29.013333 29.013334V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333z"
|
||||
fill="#FFF3DB"></path>
|
||||
<path
|
||||
d="M556.202667 770.048h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V362.837333s-59.733333 392.533333-724.309333 314.709334v63.488a29.013333 29.013333 0 0 0 28.842666 29.013333h253.098667v90.453333z"
|
||||
fill="#F2C182"></path>
|
||||
<path
|
||||
d="M619.008 632.32l101.888-35.157333-131.754667-76.117334 29.866667 111.274667zM891.904 148.992a61.44 61.44 0 0 0-84.138667 22.528l-19.968 34.133333 106.666667 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-22.528-84.138667z"
|
||||
fill="#69BAF9"></path>
|
||||
<path d="M775.338667 198.775467l131.669333 76.032-186.026667 322.218666-131.6864-76.032z"
|
||||
fill="#F7FBFF"></path>
|
||||
<path
|
||||
d="M775.168 198.826667l-5.290667 9.216 59.221334 34.133333a34.133333 34.133333 0 0 1 12.458666 46.592l-139.946666 242.346667a34.133333 34.133333 0 0 1-46.762667 12.629333l-59.050667-34.133333-6.656 11.434666 88.746667 51.2L720.896 597.333333l186.026667-322.56z"
|
||||
fill="#D8E3F0"></path>
|
||||
<path
|
||||
d="M616.448 622.592l2.56 9.728 101.888-35.157333-44.885333-25.941334-59.562667 51.370667zM891.904 148.992c-1.024 0-2.218667-0.853333-3.242667-1.536A61.610667 61.610667 0 0 1 887.466667 204.8l-19.968 34.133333-73.728-42.496-5.12 8.704 106.666666 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-23.381333-83.626667z"
|
||||
fill="#599ED4"></path>
|
||||
<path
|
||||
d="M265.898667 417.621333H494.933333a17.066667 17.066667 0 1 0 0-34.133333H265.898667a17.066667 17.066667 0 1 0 0 34.133333zM265.898667 533.504H494.933333a17.066667 17.066667 0 0 0 0-34.133333H265.898667a17.066667 17.066667 0 0 0 0 34.133333z"
|
||||
fill="#3D3D63"></path>
|
||||
<path
|
||||
d="M959.488 354.645333a99.84 99.84 0 0 0-23.722667-127.488 78.677333 78.677333 0 0 0-142.848-64.170666l-11.605333 20.138666a17.066667 17.066667 0 0 0-20.821333 7.168l-32.085334 55.466667H142.677333a46.250667 46.250667 0 0 0-45.909333 46.08v449.194667a46.08 46.08 0 0 0 45.909333 46.08h236.032v73.386666a17.066667 17.066667 0 0 0 8.362667 14.848 17.066667 17.066667 0 0 0 8.704 2.218667 17.066667 17.066667 0 0 0 8.362667-2.218667l156.672-88.234666h248.32a46.08 46.08 0 0 0 46.08-46.08V398.677333L921.6 283.306667a17.066667 17.066667 0 0 0-4.266667-21.504l1.877334-3.413334a65.365333 65.365333 0 0 1 10.410666 79.189334l-53.077333 91.989333a56.832 56.832 0 0 0 20.821333 77.653333 17.066667 17.066667 0 0 0 24.234667-6.314666 17.066667 17.066667 0 0 0-6.997333-23.04 23.04 23.04 0 0 1-8.362667-31.061334z m-138.410667 386.389334a11.946667 11.946667 0 0 1-11.946666 11.946666H556.202667a17.066667 17.066667 0 0 0-8.362667 2.218667l-134.997333 76.117333v-61.269333a17.066667 17.066667 0 0 0-17.066667-17.066667H142.677333a11.946667 11.946667 0 0 1-11.776-11.946666V291.84a11.946667 11.946667 0 0 1 11.776-11.946667h565.930667L574.464 512a17.066667 17.066667 0 0 0-1.706667 12.970667L597.333333 615.253333H265.898667a17.066667 17.066667 0 1 0 0 34.133334h352.938666a17.066667 17.066667 0 0 0 5.802667 0l102.4-35.328a17.066667 17.066667 0 0 0 9.216-7.509334l85.333333-147.968z m-204.8-184.661334l63.829334 36.864-49.322667 17.066667z m206.848-170.666666v1.365333l-108.373333 186.709333-102.4-59.050666L781.482667 221.866667l102.4 59.050666z m76.458667-161.28L887.466667 244.224l-76.970667-44.373333 11.264-19.797334a44.544 44.544 0 1 1 77.141333 44.544z"
|
||||
fill="#3D3D63"></path>
|
||||
</svg> {{ article.commentCount }} 条评论
|
||||
</span>
|
||||
<span>
|
||||
<svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
|
||||
<path
|
||||
d="M510.671749 348.792894S340.102978 48.827055 134.243447 254.685563C-97.636714 486.565724 510.671749 913.435858 510.671749 913.435858s616.107079-419.070494 376.428301-658.749272c-194.095603-194.096626-376.428302 94.106308-376.428301 94.106308z"
|
||||
fill="#FF713C"></path>
|
||||
<path
|
||||
d="M510.666632 929.674705c-3.267417 0-6.534833-0.983397-9.326413-2.950192-16.924461-11.872399-414.71121-293.557896-435.220312-529.448394-5.170766-59.482743 13.879102-111.319341 56.643068-154.075121 51.043536-51.043536 104.911398-76.930113 160.095231-76.930114 112.524796 0 196.878996 106.48115 228.475622 153.195078 33.611515-45.214784 122.406864-148.20646 234.04343-148.20646 53.930283 0 105.46603 24.205285 153.210428 71.941496 45.063335 45.063335 64.954361 99.200326 59.133795 160.920016C935.306982 641.685641 536.758893 915.327952 519.80271 926.859589a16.205077 16.205077 0 0 1-9.136078 2.815116zM282.857183 198.75574c-46.25344 0-92.396363 22.682605-137.127124 67.413365-36.149315 36.157501-51.614541 78.120218-47.25321 128.291898 17.575284 202.089671 352.199481 455.119525 412.332023 499.049037 60.434417-42.86732 395.406538-289.147446 414.567947-492.458945 4.933359-52.344159-11.341303-96.465029-49.759288-134.88199-41.431621-41.423435-85.24243-62.424748-130.242319-62.424748-122.041544 0-220.005716 152.203494-220.989114 153.742547-3.045359 4.806469-8.53335 7.883551-14.101159 7.534603a16.257266 16.257266 0 0 1-13.736863-8.184403c-0.902556-1.587148-91.569532-158.081365-213.690893-158.081364z"
|
||||
fill="#885F44"></path>
|
||||
</svg> {{ article.likeCount }} 点赞
|
||||
</span>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="recent-post-desc">
|
||||
{{ article.articleContent }}
|
||||
</div>
|
||||
<!-- 分类 标签 -->
|
||||
<div class="sort-label">
|
||||
<span style="margin-right: 12px"
|
||||
@click.stop="$router.push({path: '/sort', query: {sortId: article.sortId}})">
|
||||
<svg viewBox="0 0 1024 1024" width="15" height="15" style="vertical-align: -3px;">
|
||||
<path
|
||||
d="M179.2 153.6m89.6 0l588.8 0q89.6 0 89.6 89.6l0 486.4q0 89.6-89.6 89.6l-588.8 0q-89.6 0-89.6-89.6l0-486.4q0-89.6 89.6-89.6Z"
|
||||
fill="#FF9C55"></path>
|
||||
<path
|
||||
d="M25.6 193.4208A91.0208 91.0208 0 0 1 116.6208 102.4H382.592a91.0208 91.0208 0 0 1 87.5008 65.9712l24.5504 85.7216h412.7488A91.0208 91.0208 0 0 1 998.4 345.1392v485.4528A91.0208 91.0208 0 0 1 907.3792 921.6H116.608A91.0208 91.0208 0 0 1 25.6 830.5792V193.408z"
|
||||
fill="#FFD977"></path>
|
||||
<path
|
||||
d="M128 665.6m25.6 0l76.8 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-76.8 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
|
||||
fill="#FFF1C9"></path>
|
||||
<path
|
||||
d="M128 768m25.6 0l179.2 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-179.2 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
|
||||
fill="#FFF1C9"></path>
|
||||
<path
|
||||
d="M128 486.4m51.2 0l0 0q51.2 0 51.2 51.2l0 0q0 51.2-51.2 51.2l0 0q-51.2 0-51.2-51.2l0 0q0-51.2 51.2-51.2Z"
|
||||
fill="#FFA86A"></path>
|
||||
</svg> {{ article.sort.sortName }}
|
||||
</span>
|
||||
<span @click.stop="$router.push({path: '/sort', query: {sortId: article.sortId, labelId: article.labelId}})">
|
||||
<svg viewBox="0 0 1024 1024" width="15" height="15" style="vertical-align: -3px;">
|
||||
<path
|
||||
d="M905.0112 560.4352l-342.784 342.784c-56.7808 56.7808-148.7872 56.7808-205.568 0l-231.5776-231.5776c-56.7808-56.7808-56.7808-148.7872 0-205.568l342.9376-342.9376a114.8928 114.8928 0 0 1 84.224-33.5872l266.3936 7.2192c60.7744 1.6384 109.7216 50.3808 111.5648 111.1552l8.2944 267.8272c1.024 31.6928-11.1104 62.3104-33.4848 84.6848z"
|
||||
fill="#8C7BFD"></path>
|
||||
<path
|
||||
d="M675.2256 491.4688c-82.176 0-149.0432-66.8672-149.0432-149.0432s66.8672-149.0432 149.0432-149.0432 149.0432 66.8672 149.0432 149.0432-66.8672 149.0432-149.0432 149.0432z m0-192.2048c-23.808 0-43.2128 19.3536-43.2128 43.2128 0 23.808 19.3536 43.2128 43.2128 43.2128 23.808 0 43.2128-19.3536 43.2128-43.2128s-19.4048-43.2128-43.2128-43.2128z"
|
||||
fill="#FFE37B"></path>
|
||||
</svg> {{ article.label.labelName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
articleList: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.article-first {
|
||||
color: var(--greyFont);
|
||||
border-bottom: 1px dashed var(--lightGray);
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.recent-post-container {
|
||||
max-width: 780px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.recent-post-container .recent-post-item:not(:last-child) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.recent-post-item {
|
||||
height: 300px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
animation: hideToShow 1s ease-in-out;
|
||||
}
|
||||
|
||||
.recent-post-item-image {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.recent-post-item-image >>> .el-image__inner {
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.recent-post-item-image >>> .el-image__inner:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.leftImage {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.rightImage {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.recent-post-item-post {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 35px;
|
||||
}
|
||||
|
||||
.recent-post-item-post h3 {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 12px;
|
||||
color: var(--greyFont);
|
||||
}
|
||||
|
||||
.post-meta span:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.recent-post-desc {
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
/* 超出4行就... */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.leftImage .sort-label {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.rightImage .sort-label {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 35px;
|
||||
}
|
||||
|
||||
.sort-label span {
|
||||
padding: 3px 10px;
|
||||
background-color: var(--maxLightGray);
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
color: var(--greyFont);
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sort-label span:hover {
|
||||
background-color: var(--themeBackground);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.error-text {
|
||||
font-size: 20px;
|
||||
line-height: 1.8;
|
||||
letter-spacing: 8px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hasVideo {
|
||||
padding: 0 20px;
|
||||
background: var(--maxMaxWhiteMask);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.recent-post-item {
|
||||
height: 450px;
|
||||
position: unset;
|
||||
display: block;
|
||||
flex-direction: unset;
|
||||
}
|
||||
|
||||
.recent-post-item-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.leftImage {
|
||||
position: unset;
|
||||
left: unset;
|
||||
}
|
||||
|
||||
.rightImage {
|
||||
position: unset;
|
||||
right: unset;
|
||||
text-align: unset;
|
||||
}
|
||||
|
||||
.recent-post-item-post {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.recent-post-desc {
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.leftImage .sort-label {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.rightImage .sort-label {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
432
src/components/comment/comment.vue
Normal file
432
src/components/comment/comment.vue
Normal file
@ -0,0 +1,432 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 评论框 -->
|
||||
<div style="margin-bottom: 40px">
|
||||
<div class="comment-head">
|
||||
<i class="el-icon-edit-outline" style="font-weight: bold;font-size: 22px;"></i> 留言
|
||||
</div>
|
||||
<div>
|
||||
<!-- 文字评论 -->
|
||||
<div v-show="!isGraffiti">
|
||||
<commentBox @showGraffiti="isGraffiti = !isGraffiti"
|
||||
@submitComment="submitComment">
|
||||
</commentBox>
|
||||
</div>
|
||||
<!-- 画笔 -->
|
||||
<!-- <div v-show="isGraffiti">-->
|
||||
<!-- <graffiti @showComment="isGraffiti = !isGraffiti"-->
|
||||
<!-- @addGraffitiComment="addGraffitiComment">-->
|
||||
<!-- </graffiti>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 评论内容 -->
|
||||
<div v-if="comments.length > 0">
|
||||
<!-- 评论数量 -->
|
||||
<div class="commentInfo-title">
|
||||
<span style="font-size: 1.15rem">Comments | </span>
|
||||
<span>{{ total }} 条留言</span>
|
||||
</div>
|
||||
<!-- 评论详情 -->
|
||||
<div id="comment-content" class="commentInfo-detail"
|
||||
v-for="(item, index) in comments"
|
||||
:key="index">
|
||||
<!-- 头像 -->
|
||||
<el-avatar shape="square" class="commentInfo-avatar" :size="35" :src="item.avatar"></el-avatar>
|
||||
|
||||
<div style="flex: 1;padding-left: 12px">
|
||||
<!-- 评论信息 -->
|
||||
<div style="display: flex;justify-content: space-between">
|
||||
<div>
|
||||
<span class="commentInfo-username">{{ item.username }}</span>
|
||||
<span class="commentInfo-master">{{ item.createTimeLv }}</span>
|
||||
<span class="commentInfo-other">{{ $common.getDateDiff(item.createTime) }}</span>
|
||||
</div>
|
||||
<div class="commentInfo-reply" @click="replyDialog(item, item)">
|
||||
<span v-if="item.childComments.total > 0">{{item.childComments.total}} </span><span>回复</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 评论内容 -->
|
||||
<div class="commentInfo-content">
|
||||
<span v-html="item.commentContent"></span>
|
||||
</div>
|
||||
<!-- 回复模块 -->
|
||||
<div v-if="!$common.isEmpty(item.childComments) && !$common.isEmpty(item.childComments.records)">
|
||||
<div class="commentInfo-detail" v-for="(childItem, i) in item.childComments.records" :key="i">
|
||||
<!-- 头像 -->
|
||||
<el-avatar shape="square" class="commentInfo-avatar" :size="30" :src="childItem.avatar"></el-avatar>
|
||||
|
||||
<div style="flex: 1;padding-left: 12px">
|
||||
<!-- 评论信息 -->
|
||||
<div style="display: flex;justify-content: space-between">
|
||||
<div>
|
||||
<span class="commentInfo-username-small">{{ childItem.username }}</span>
|
||||
<span class="commentInfo-master">{{ childItem.createTimeLv }}</span>
|
||||
<span class="commentInfo-other">{{ $common.getDateDiff(childItem.createTime) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="commentInfo-reply" @click="replyDialog(childItem, item)">回复</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 评论内容 -->
|
||||
<div class="commentInfo-content">
|
||||
<template v-if="childItem.parentCommentId !== item.id &&
|
||||
childItem.parentUserId !== childItem.userId">
|
||||
<span style="color: var(--blue)">@{{ childItem.parentUsername }} </span>:
|
||||
</template>
|
||||
<span v-html="childItem.commentContent"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrap" v-if="item.childComments.records.length < item.childComments.total">
|
||||
<div class="pagination"
|
||||
@click="toChildPage(item)">
|
||||
展开
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<proPage :current="pagination.current"
|
||||
:size="pagination.size"
|
||||
:total="pagination.total"
|
||||
:buttonSize="6"
|
||||
:color="$constant.commentPageColor"
|
||||
@toPage="toPage">
|
||||
</proPage>
|
||||
</div>
|
||||
|
||||
<div v-else class="myCenter" style="color: var(--greyFont)">
|
||||
<i>来发第一个留言啦~</i>
|
||||
</div>
|
||||
|
||||
<el-dialog title="留言"
|
||||
:visible.sync="replyDialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
center>
|
||||
<div>
|
||||
<commentBox :disableGraffiti="true"
|
||||
@submitComment="submitReply">
|
||||
</commentBox>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// const graffiti = () => import( "./graffiti");
|
||||
const commentBox = () => import( "./commentBox");
|
||||
const proPage = () => import( "../common/proPage");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// graffiti,
|
||||
commentBox,
|
||||
proPage
|
||||
},
|
||||
props: {
|
||||
source: {
|
||||
type: Number
|
||||
},
|
||||
type: {
|
||||
type: String
|
||||
},
|
||||
userId: {
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isGraffiti: false,
|
||||
total: 0,
|
||||
replyDialogVisible: false,
|
||||
floorComment: {},
|
||||
replyComment: {},
|
||||
comments: [],
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
source: this.source,
|
||||
commentType: this.type,
|
||||
floorCommentId: null
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
created() {
|
||||
this.getComments(this.pagination);
|
||||
this.getTotal();
|
||||
},
|
||||
methods: {
|
||||
toPage(page) {
|
||||
this.pagination.current = page;
|
||||
window.scrollTo({
|
||||
top: document.getElementById('comment-content').offsetTop
|
||||
});
|
||||
this.getComments(this.pagination);
|
||||
},
|
||||
getTotal() {
|
||||
this.$http.get(this.$constant.baseURL + "/comment/getCommentCount", {source: this.source, type: this.type})
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.total = res.data;
|
||||
this.$emit("change", this.total);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
toChildPage(floorComment) {
|
||||
floorComment.childComments.current += 1;
|
||||
let pagination = {
|
||||
current: floorComment.childComments.current,
|
||||
size: 5,
|
||||
total: 0,
|
||||
source: this.source,
|
||||
commentType: this.type,
|
||||
floorCommentId: floorComment.id
|
||||
}
|
||||
this.getComments(pagination, floorComment, true);
|
||||
},
|
||||
emoji(comments, flag) {
|
||||
comments.forEach(c => {
|
||||
c.commentContent = c.commentContent.replace(/\n/g, '<br/>');
|
||||
c.commentContent = this.$common.faceReg(c.commentContent);
|
||||
c.commentContent = this.$common.pictureReg(c.commentContent);
|
||||
if (flag) {
|
||||
if (!this.$common.isEmpty(c.childComments) && !this.$common.isEmpty(c.childComments.records)) {
|
||||
c.childComments.records.forEach(cc => {
|
||||
c.commentContent = c.commentContent.replace(/\n/g, '<br/>');
|
||||
cc.commentContent = this.$common.faceReg(cc.commentContent);
|
||||
cc.commentContent = this.$common.pictureReg(cc.commentContent);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getComments(pagination, floorComment = {}, isToPage = false) {
|
||||
this.$http.post(this.$constant.baseURL + "/comment/listComment", pagination)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data) && !this.$common.isEmpty(res.data.records)) {
|
||||
if (this.$common.isEmpty(floorComment)) {
|
||||
this.comments = res.data.records;
|
||||
pagination.total = res.data.total;
|
||||
this.emoji(this.comments, true);
|
||||
} else {
|
||||
if (isToPage === false) {
|
||||
floorComment.childComments = res.data;
|
||||
} else {
|
||||
floorComment.childComments.total = res.data.total;
|
||||
floorComment.childComments.records = floorComment.childComments.records.concat(res.data.records);
|
||||
}
|
||||
this.emoji(floorComment.childComments.records, false);
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$common.imgShow("#comment-content .pictureReg");
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
addGraffitiComment(graffitiComment) {
|
||||
this.submitComment(graffitiComment);
|
||||
},
|
||||
submitComment(commentContent) {
|
||||
let comment = {
|
||||
source: this.source,
|
||||
type: this.type,
|
||||
commentContent: commentContent
|
||||
};
|
||||
|
||||
this.$http.post(this.$constant.baseURL + "/comment/saveComment", comment)
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '保存成功！'
|
||||
});
|
||||
this.pagination = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
source: this.source,
|
||||
commentType: this.type,
|
||||
floorCommentId: null
|
||||
}
|
||||
this.getComments(this.pagination);
|
||||
this.getTotal();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
submitReply(commentContent) {
|
||||
let comment = {
|
||||
source: this.source,
|
||||
type: this.type,
|
||||
floorCommentId: this.floorComment.id,
|
||||
commentContent: commentContent,
|
||||
parentCommentId: this.replyComment.id,
|
||||
parentUserId: this.replyComment.userId
|
||||
};
|
||||
|
||||
let floorComment = this.floorComment;
|
||||
|
||||
this.$http.post(this.$constant.baseURL + "/comment/saveComment", comment)
|
||||
.then((res) => {
|
||||
let pagination = {
|
||||
current: 1,
|
||||
size: 5,
|
||||
total: 0,
|
||||
source: this.source,
|
||||
commentType: this.type,
|
||||
floorCommentId: floorComment.id
|
||||
}
|
||||
this.getComments(pagination, floorComment);
|
||||
this.getTotal();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
this.handleClose();
|
||||
},
|
||||
replyDialog(comment, floorComment) {
|
||||
this.replyComment = comment;
|
||||
this.floorComment = floorComment;
|
||||
this.replyDialogVisible = true;
|
||||
},
|
||||
handleClose() {
|
||||
this.replyDialogVisible = false;
|
||||
this.floorComment = {};
|
||||
this.replyComment = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.comment-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin: 40px 0 20px 0;
|
||||
user-select: none;
|
||||
color: var(--themeBackground);
|
||||
}
|
||||
|
||||
.commentInfo-title {
|
||||
margin-bottom: 20px;
|
||||
color: var(--greyFont);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#comment-content {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.commentInfo-detail {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.commentInfo-avatar {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.commentInfo-username {
|
||||
color: var(--orangeRed);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.commentInfo-username-small {
|
||||
color: var(--orangeRed);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.commentInfo-master {
|
||||
color: var(--green);
|
||||
border: 1px solid var(--green);
|
||||
border-radius: 0.2rem;
|
||||
font-size: 12px;
|
||||
padding: 2px 4px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.commentInfo-other {
|
||||
font-size: 12px;
|
||||
color: var(--greyFont);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.commentInfo-reply {
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: var(--white);
|
||||
background: var(--themeBackground);
|
||||
border-radius: 0.2rem;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
.commentInfo-content {
|
||||
margin: 15px 0 25px;
|
||||
padding: 18px 20px;
|
||||
background: var(--commentContent);
|
||||
border-radius: 12px;
|
||||
color: var(--black);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 6px 20px;
|
||||
border: 1px solid var(--lightGray);
|
||||
border-radius: 3rem;
|
||||
color: var(--greyFont);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pagination:hover {
|
||||
border: 1px solid var(--themeBackground);
|
||||
color: var(--themeBackground);
|
||||
box-shadow: 0 0 5px var(--themeBackground);
|
||||
}
|
||||
</style>
|
||||
186
src/components/comment/commentBox.vue
Normal file
186
src/components/comment/commentBox.vue
Normal file
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 框 -->
|
||||
<textarea
|
||||
class="comment-textarea"
|
||||
v-model="commentContent"
|
||||
placeholder="写下点什么..."
|
||||
maxlength="1000"/>
|
||||
<!-- 按钮 -->
|
||||
<div class="myBetween" style="margin-bottom: 10px">
|
||||
<div style="display: flex">
|
||||
<div :class="{'emoji-active':showEmoji}"
|
||||
@click="showEmoji = !showEmoji">
|
||||
<i class="el-icon-orange myEmoji"></i>
|
||||
</div>
|
||||
<div @click="openPicture()">
|
||||
<i class="el-icon-picture myPicture"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex">
|
||||
<!-- <proButton :info="'涂鸦'"-->
|
||||
<!-- v-show="!$common.mobile() && !disableGraffiti"-->
|
||||
<!-- @click.native="showGraffiti()"-->
|
||||
<!-- :before="$constant.before_color_1"-->
|
||||
<!-- :after="$constant.after_color_1"-->
|
||||
<!-- style="margin-right: 6px">-->
|
||||
<!-- </proButton>-->
|
||||
<proButton :info="'提交'"
|
||||
@click.native="submitComment()"
|
||||
:before="$constant.before_color_2"
|
||||
:after="$constant.after_color_2">
|
||||
</proButton>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表情 -->
|
||||
<emoji @addEmoji="addEmoji" :showEmoji="showEmoji"></emoji>
|
||||
|
||||
<el-dialog title="图片"
|
||||
:visible.sync="showPicture"
|
||||
width="25%"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
center>
|
||||
<div>
|
||||
<uploadPicture :prefix="'commentPicture'" @addPicture="addPicture" :maxSize="2"
|
||||
:maxNumber="1"></uploadPicture>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const emoji = () => import( "../common/emoji");
|
||||
const proButton = () => import( "../common/proButton");
|
||||
const uploadPicture = () => import( "../common/uploadPicture");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
emoji,
|
||||
proButton,
|
||||
uploadPicture
|
||||
},
|
||||
props: {
|
||||
disableGraffiti: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
commentContent: "",
|
||||
showEmoji: false,
|
||||
showPicture: false,
|
||||
picture: {
|
||||
name: this.$store.state.currentUser.username,
|
||||
url: ""
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openPicture() {
|
||||
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||
this.$message({
|
||||
message: "请先登录！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.showPicture = true;
|
||||
},
|
||||
|
||||
addPicture(res) {
|
||||
this.picture.url = res;
|
||||
this.savePicture();
|
||||
},
|
||||
savePicture() {
|
||||
let img = "[" + this.picture.name + "," + this.picture.url + "]";
|
||||
this.commentContent += img;
|
||||
this.picture.url = "";
|
||||
this.showPicture = false;
|
||||
},
|
||||
addEmoji(key) {
|
||||
this.commentContent += key;
|
||||
},
|
||||
showGraffiti() {
|
||||
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||
this.$message({
|
||||
message: "请先登录！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.commentContent = "";
|
||||
this.$emit("showGraffiti");
|
||||
},
|
||||
submitComment() {
|
||||
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||
this.$message({
|
||||
message: "请先登录！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.commentContent.trim() === "") {
|
||||
this.$message({
|
||||
message: "你还没写呢~",
|
||||
type: "warning"
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$emit("submitComment", this.commentContent.trim());
|
||||
this.commentContent = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.comment-textarea {
|
||||
border: 1px solid var(--lightGray);
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
padding: 15px;
|
||||
min-height: 180px;
|
||||
/* 不改变大小 */
|
||||
resize: none;
|
||||
/* 不改变边框 */
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
background-image: var(--commentURL);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.comment-textarea:focus {
|
||||
border-color: var(--themeBackground);
|
||||
}
|
||||
|
||||
.myEmoji {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.myEmoji:hover {
|
||||
transform: rotate(360deg);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.myPicture {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.emoji-active {
|
||||
color: var(--red);
|
||||
}
|
||||
</style>
|
||||
408
src/components/comment/graffiti.vue
Normal file
408
src/components/comment/graffiti.vue
Normal file
@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 画布 -->
|
||||
<div style="padding: 5px" @mousemove="canvasOutMove($event)" @touchmove="canvasOutMove($event)">
|
||||
<div class="graffiti-container">
|
||||
<canvas id="canvas"
|
||||
width="766"
|
||||
height="400"
|
||||
@mousedown="canvasDown($event)"
|
||||
@mouseup="canvasUp($event)"
|
||||
@mousemove="canvasMove($event)"
|
||||
@touchstart="canvasDown($event)"
|
||||
@touchend="canvasUp($event)"
|
||||
@touchmove="canvasMove($event)">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding: 10px 0 0 5px;">
|
||||
<!-- 颜色 -->
|
||||
<div class="graffiti-tools">
|
||||
<span class="graffiti-title">画笔颜色</span>
|
||||
<div class="myCenter" style="margin-left: 2rem">
|
||||
<div v-for="(color, index) in colors"
|
||||
:class="{ activeColor: config.lineColor === color }"
|
||||
:style="{ background: color }"
|
||||
@click="setColor(color)"
|
||||
class="graffiti-color"
|
||||
:key="index">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 大小 -->
|
||||
<div class="graffiti-tools">
|
||||
<span class="graffiti-title">画笔大小</span>
|
||||
<div class="myCenter" style="margin-left: 2rem">
|
||||
<i v-for="(pen, index) in brushSize"
|
||||
:key="index"
|
||||
class="graffiti-size"
|
||||
:class="[pen.className, { activeSize: config.lineWidth === pen.lineWidth }]"
|
||||
@click="setBrush(pen.lineWidth)">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作 -->
|
||||
<div class="graffiti-tools">
|
||||
<span class="graffiti-title">操作</span>
|
||||
<div class="myCenter" style="margin-left: 3.7rem">
|
||||
<i v-for="(control, index) in controls"
|
||||
:title="control.title"
|
||||
:class="control.className"
|
||||
class="graffiti-operate"
|
||||
@click="controlCanvas(control.action)"
|
||||
:key="index">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<div class="graffiti-tools" style="justify-content: center">
|
||||
<proButton :info="'文字'"
|
||||
@click.native="showComment()"
|
||||
:before="$constant.before_color_1"
|
||||
:after="$constant.after_color_1"
|
||||
style="margin-right: 6px">
|
||||
</proButton>
|
||||
<proButton :info="'提交'"
|
||||
@click.native="getImage()"
|
||||
:before="$constant.before_color_2"
|
||||
:after="$constant.after_color_2">
|
||||
</proButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const proButton = () => import( "../common/proButton");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
proButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
context: {},
|
||||
canvasMoveUse: false,
|
||||
// 存储当前表面状态数组-上一步
|
||||
preDrawAry: [],
|
||||
// 存储当前表面状态数组-下一步
|
||||
nextDrawAry: [],
|
||||
// 中间数组
|
||||
middleAry: [],
|
||||
// 配置参数
|
||||
config: {
|
||||
lineWidth: 5,
|
||||
lineColor: "#8154A3",
|
||||
shadowBlur: 2,
|
||||
},
|
||||
colors: ["#8154A3", "#fef4ac", "#0018ba", "#ffc200", "#f32f15", "#cccccc", "#5ab639"],
|
||||
brushSize: [{
|
||||
className: "small el-icon-edit",
|
||||
lineWidth: 5,
|
||||
}, {
|
||||
className: "middle el-icon-edit",
|
||||
lineWidth: 10,
|
||||
}, {
|
||||
className: "big el-icon-edit",
|
||||
lineWidth: 15,
|
||||
}]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
controls() {
|
||||
return [{
|
||||
title: "上一步",
|
||||
action: "prev",
|
||||
className: this.preDrawAry.length
|
||||
? "active el-icon-arrow-left"
|
||||
: "ban el-icon-arrow-left",
|
||||
}, {
|
||||
title: "下一步",
|
||||
action: "next",
|
||||
className: this.nextDrawAry.length
|
||||
? "active el-icon-arrow-right"
|
||||
: "ban el-icon-arrow-right",
|
||||
}, {
|
||||
title: "清除",
|
||||
action: "clear",
|
||||
className:
|
||||
this.preDrawAry.length || this.nextDrawAry.length
|
||||
? "active el-icon-refresh"
|
||||
: "ban el-icon-refresh",
|
||||
}];
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const canvas = document.querySelector("#canvas");
|
||||
this.context = canvas.getContext("2d", {willReadFrequently: true});
|
||||
this.initDraw();
|
||||
this.setCanvasStyle();
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
canvasOutMove(e) {
|
||||
const canvas = document.querySelector("#canvas");
|
||||
if (e.target !== canvas) {
|
||||
this.canvasMoveUse = false;
|
||||
}
|
||||
},
|
||||
initDraw() {
|
||||
const preData = this.context.getImageData(0, 0, 1200, 600);
|
||||
// 空绘图表面进栈
|
||||
this.middleAry.push(preData);
|
||||
},
|
||||
canvasUp(e) {
|
||||
const preData = this.context.getImageData(0, 0, 1200, 600);
|
||||
if (!this.nextDrawAry.length) {
|
||||
// 当前绘图表面进栈
|
||||
this.middleAry.push(preData);
|
||||
} else {
|
||||
this.middleAry = [];
|
||||
this.middleAry = this.middleAry.concat(this.preDrawAry);
|
||||
this.middleAry.push(preData);
|
||||
this.nextDrawAry = [];
|
||||
}
|
||||
this.canvasMoveUse = false;
|
||||
this.context.beginPath();
|
||||
},
|
||||
canvasDown(e) {
|
||||
this.canvasMoveUse = true;
|
||||
// client是基于整个页面的坐标
|
||||
// offset是canvas距离顶部以及左边的距离
|
||||
this.setCanvasStyle();
|
||||
// 清除子路径
|
||||
this.context.beginPath();
|
||||
this.context.moveTo(e.layerX, e.layerY);
|
||||
// 当前绘图表面状态
|
||||
const preData = this.context.getImageData(0, 0, 1200, 600);
|
||||
// 当前绘图表面进栈
|
||||
this.preDrawAry.push(preData);
|
||||
},
|
||||
canvasMove(e) {
|
||||
if (this.canvasMoveUse) {
|
||||
this.context.lineTo(e.layerX, e.layerY);
|
||||
this.context.stroke();
|
||||
}
|
||||
},
|
||||
// 设置绘画配置
|
||||
setCanvasStyle() {
|
||||
this.context.lineWidth = this.config.lineWidth;
|
||||
this.context.shadowBlur = this.config.shadowBlur;
|
||||
this.context.shadowColor = this.config.lineColor;
|
||||
this.context.strokeStyle = this.config.lineColor;
|
||||
},
|
||||
// 设置颜色
|
||||
setColor(color) {
|
||||
this.config.lineColor = color;
|
||||
},
|
||||
// 设置笔刷大小
|
||||
setBrush(size) {
|
||||
this.config.lineWidth = size;
|
||||
},
|
||||
controlCanvas(action) {
|
||||
switch (action) {
|
||||
case "prev":
|
||||
if (this.preDrawAry.length) {
|
||||
const popData = this.preDrawAry.pop();
|
||||
const midData = this.middleAry[this.preDrawAry.length + 1];
|
||||
this.nextDrawAry.push(midData);
|
||||
this.context.putImageData(popData, 0, 0);
|
||||
}
|
||||
break;
|
||||
case "next":
|
||||
if (this.nextDrawAry.length) {
|
||||
const popData = this.nextDrawAry.pop();
|
||||
const midData = this.middleAry[this.middleAry.length - this.nextDrawAry.length - 2];
|
||||
this.preDrawAry.push(midData);
|
||||
this.context.putImageData(popData, 0, 0);
|
||||
}
|
||||
break;
|
||||
case "clear":
|
||||
this.clearContext();
|
||||
this.middleAry = [this.middleAry[0]];
|
||||
break;
|
||||
}
|
||||
},
|
||||
clearContext() {
|
||||
this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
|
||||
this.preDrawAry = [];
|
||||
this.nextDrawAry = [];
|
||||
},
|
||||
showComment() {
|
||||
this.clearContext();
|
||||
this.$emit("showComment");
|
||||
},
|
||||
getImage() {
|
||||
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||
this.$message({
|
||||
message: "请先登录！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.preDrawAry.length < 1) {
|
||||
this.$message({
|
||||
message: "你还没画呢~",
|
||||
type: "warning"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const canvas = document.querySelector("#canvas");
|
||||
const dataURL = canvas.toDataURL("image/png");
|
||||
let arr = dataURL.split(","),
|
||||
mine = arr[0].match(/:(.*?);/)[1],
|
||||
str = atob(arr[1]),
|
||||
n = str.length,
|
||||
u8arr = new Uint8Array(n);
|
||||
while (n--) {
|
||||
u8arr[n] = str.charCodeAt(n);
|
||||
}
|
||||
let obj = new Blob([u8arr], {type: mine});
|
||||
let key = "graffiti" + "/" + this.$store.state.currentUser.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentUser.id + new Date().getTime() + Math.floor(Math.random() * 1000) + ".png";
|
||||
|
||||
let storeType = localStorage.getItem("defaultStoreType");
|
||||
|
||||
let fd = new FormData();
|
||||
fd.append("file", obj);
|
||||
fd.append("key", key);
|
||||
fd.append("relativePath", key);
|
||||
fd.append("type", "graffiti");
|
||||
fd.append("storeType", storeType);
|
||||
|
||||
if (storeType === "local") {
|
||||
this.saveLocal(fd);
|
||||
} else if (storeType === "qiniu") {
|
||||
this.saveQiniu(fd);
|
||||
}
|
||||
},
|
||||
saveLocal(fd) {
|
||||
this.$http.upload(this.$constant.baseURL + "/resource/upload", fd)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.clearContext();
|
||||
let url = res.data;
|
||||
let img = "[你画我猜," + url + "]";
|
||||
this.$emit("addGraffitiComment", img);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
saveQiniu(fd) {
|
||||
this.$http.get(this.$constant.baseURL + "/qiniu/getUpToken", {key: fd.get("key")})
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
fd.append("token", res.data);
|
||||
|
||||
this.$http.uploadQiniu(this.$store.state.sysConfig.qiniuUrl, fd)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.key)) {
|
||||
this.clearContext();
|
||||
let url = this.$store.state.sysConfig['qiniu.downloadUrl'] + res.key;
|
||||
let file = fd.get("file");
|
||||
this.$common.saveResource(this, "graffiti", url, file.size, file.type, null, "qiniu");
|
||||
let img = "[你画我猜," + url + "]";
|
||||
this.$emit("addGraffitiComment", img);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.graffiti-container {
|
||||
overflow: hidden;
|
||||
border: 2px var(--lightGray) solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.graffiti-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.graffiti-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.graffiti-color {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.graffiti-color:hover {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
}
|
||||
|
||||
.activeColor {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
}
|
||||
|
||||
.graffiti-size {
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.graffiti-size.small {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.graffiti-size.middle {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.graffiti-size.big {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.activeSize {
|
||||
background-color: var(--themeBackground);
|
||||
color: var(--white);
|
||||
border-radius: 50%;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.graffiti-operate {
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.graffiti-operate.ban {
|
||||
cursor: not-allowed
|
||||
}
|
||||
</style>
|
||||
180
src/components/common/card.vue
Normal file
180
src/components/common/card.vue
Normal file
@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div class="card-container" v-if="!$common.isEmpty(resourcePathList)">
|
||||
<div v-for="(resourcePath, index) in resourcePathList"
|
||||
:key="index"
|
||||
class="card-item shadow-box-mini wow"
|
||||
@click="clickResourcePath(resourcePath)">
|
||||
<div class="card-image">
|
||||
<el-image class="my-el-image"
|
||||
v-once
|
||||
lazy
|
||||
:src="resourcePath.cover"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot myCenter" style="background-color: var(--lightGreen)">
|
||||
<div class="error-text">
|
||||
<div>遇事不决，可问春风</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">
|
||||
<span v-if="resourcePath.recommendStatus">
|
||||
🔥
|
||||
</span>
|
||||
{{resourcePath.title}}
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
{{resourcePath.introduction}}
|
||||
</div>
|
||||
|
||||
<div class="card-time">
|
||||
<svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
|
||||
<path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#409EFF"></path>
|
||||
<path
|
||||
d="M654.222222 256c-17.066667 0-28.444444 11.377778-28.444444 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444444 28.444445s28.444444-11.377778 28.444445-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444445-28.444444zM369.777778 256c-17.066667 0-28.444444 11.377778-28.444445 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444445 28.444445s28.444444-11.377778 28.444444-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444444-28.444444z"
|
||||
fill="#FFFFFF"></path>
|
||||
<path
|
||||
d="M725.333333 312.888889H711.111111v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-170.666666v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-14.222222c-22.755556 0-42.666667 19.911111-42.666667 42.666667v341.333333c0 22.755556 19.911111 42.666667 42.666667 42.666667h426.666666c22.755556 0 42.666667-19.911111 42.666667-42.666667v-341.333333c0-22.755556-19.911111-42.666667-42.666667-42.666667zM426.666667 654.222222h-56.888889c-17.066667 0-28.444444-11.377778-28.444445-28.444444s11.377778-28.444444 28.444445-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444444 28.444445s-11.377778 28.444444-28.444444 28.444444z m227.555555 0h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444445s-11.377778 28.444444-28.444445 28.444444z m0-113.777778h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444444h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444444s-11.377778 28.444444-28.444445 28.444444z"
|
||||
fill="#FFFFFF"></path>
|
||||
</svg>
|
||||
{{ $common.getDateDiff(resourcePath.createTime) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
resourcePathList: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
clickResourcePath(resourcePath) {
|
||||
this.$emit("clickResourcePath", resourcePath.url);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, .88);
|
||||
overflow: hidden;
|
||||
margin: 10px;
|
||||
height: 220px;
|
||||
flex-shrink: 0;
|
||||
width: calc(100% / 4 - 20px);
|
||||
cursor: pointer;
|
||||
animation: zoomIn 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.card-image >>> .el-image__inner {
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.card-image >>> .el-image__inner:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
.card-title:hover {
|
||||
color: var(--lightGreen);
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.card-time {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
font-size: 12px;
|
||||
color: var(--greyFont);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.card-item {
|
||||
width: calc(100% / 3 - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 760px) {
|
||||
.card-item {
|
||||
width: calc(100% / 2 - 10px);
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 520px) {
|
||||
.card-item {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
79
src/components/common/emoji.vue
Normal file
79
src/components/common/emoji.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div>
|
||||
<transition name="body">
|
||||
<div v-show="showEmoji">
|
||||
<span class="emoji-item"
|
||||
v-for="(value, key, index) in emojiListURL"
|
||||
:key="index"
|
||||
@click="addEmoji(key)">
|
||||
<img loading="lazy" class="emoji" :src="value" :title="key" width="24px" height="24px"/>
|
||||
</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
showEmoji: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
emojiList: this.$constant.emojiList,
|
||||
emojiListURL: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.emojiListURL = this.getEmojiList(this.emojiList);
|
||||
},
|
||||
methods: {
|
||||
addEmoji(key) {
|
||||
this.$emit("addEmoji", key);
|
||||
},
|
||||
getEmojiList(emojiList) {
|
||||
let emojiName;
|
||||
let url;
|
||||
let result = {}
|
||||
for (let i = 0; i < emojiList.length; i++) {
|
||||
emojiName = "[" + emojiList[i] + "]";
|
||||
let j = i + 1;
|
||||
url = this.$store.state.sysConfig['webStaticResourcePrefix'] + "emoji/q" + j + ".gif";
|
||||
result[emojiName] = url;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.emoji-item {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.emoji-item:hover {
|
||||
transition: all 0.2s;
|
||||
border-radius: 0.25rem;
|
||||
background: var(--lightGray);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
margin: 0.25rem;
|
||||
/* 把此元素放置在父元素的中部 */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.body-enter-active, .body-leave-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.body-enter, .body-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
</style>
|
||||
66
src/components/common/loader.vue
Normal file
66
src/components/common/loader.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 加载动画 -->
|
||||
<transition name="loader">
|
||||
<div v-show="loaderVisible">
|
||||
<slot name="loader"></slot>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 内容 -->
|
||||
<transition name="body">
|
||||
<div v-show="bodyVisible">
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loaderVisible: this.loading,
|
||||
bodyVisible: !this.loading
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
loading(loading) {
|
||||
this.loaderVisible = loading;
|
||||
setTimeout(() => {
|
||||
this.bodyVisible = !loading;
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/*
|
||||
v-enter：定义进入过渡的开始状态
|
||||
v-enter-active：定义进入过渡生效时的状态
|
||||
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态
|
||||
v-leave：定义离开过渡的开始状态
|
||||
v-leave-active：定义离开过渡生效时的状态
|
||||
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态
|
||||
*/
|
||||
|
||||
.loader-enter-active,
|
||||
.loader-leave-active,
|
||||
.body-enter-active,
|
||||
.body-leave-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.loader-enter, .loader-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.body-enter, .body-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.5) translateY(50%);
|
||||
}
|
||||
</style>
|
||||
65
src/components/common/myFooter.vue
Normal file
65
src/components/common/myFooter.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="myFooter-wrap" v-show="showFooter">
|
||||
<div class="myFooter">
|
||||
<div class="footer-title">{{$store.state.webInfo.footer}}</div>
|
||||
<div class="icp">本网站由 <a href="https://poetize.cn" target="_blank">POETIZE</a> 强力支持 <a href="http://beian.miit.gov.cn/" target="_blank">{{ $store.state.sysConfig.beian }}</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
showFooter: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.myFooter-wrap {
|
||||
user-select: none;
|
||||
animation: hideToShow 2s;
|
||||
}
|
||||
|
||||
.myFooter {
|
||||
border-radius: 1.5rem 1.5rem 0 0;
|
||||
background: var(--gradientBG);
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
background-size: 300% 300%;
|
||||
animation: gradientBG 10s ease infinite;
|
||||
}
|
||||
|
||||
.footer-title {
|
||||
padding-top: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.icp, .icp a {
|
||||
color: var(--maxGreyFont);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.icp {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.icp a {
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.icp a:hover {
|
||||
color: var(--themeBackground);
|
||||
}
|
||||
|
||||
</style>
|
||||
155
src/components/common/photo.vue
Normal file
155
src/components/common/photo.vue
Normal file
@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="card-container" v-if="!$common.isEmpty(resourcePathList)">
|
||||
<div v-for="(resourcePath, index) in resourcePathList"
|
||||
:key="index"
|
||||
class="card-item wow shadow-box-mini">
|
||||
<div class="card-image">
|
||||
<el-image class="my-el-image"
|
||||
v-once
|
||||
lazy
|
||||
:preview-src-list="[resourcePath.cover]"
|
||||
:src="resourcePath.cover"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot"></div>
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<el-tooltip placement="bottom-start" effect="light">
|
||||
<div slot="content">{{resourcePath.title}}</div>
|
||||
<div class="card-desc">
|
||||
{{resourcePath.title}}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="card-time">
|
||||
Date: {{$common.getDateDiff(resourcePath.createTime)}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
resourcePathList: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 15px;
|
||||
height: 450px;
|
||||
flex-shrink: 0;
|
||||
width: calc(100% / 3 - 30px);
|
||||
cursor: pointer;
|
||||
animation: zoomIn 0.8s ease-in-out;
|
||||
padding: 0.7rem;
|
||||
background: var(--background);
|
||||
border-radius: 1.5rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(147, 147, 147, 0.61);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card-image >>> .el-image__inner {
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.card-image >>> .el-image__inner:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0 5px 5px;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
color: var(--fontColor);
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.card-time {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
color: #999999;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.card-item {
|
||||
width: calc(100% / 2 - 30px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.card-item {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
.card-item {
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.card-item {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 210px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
121
src/components/common/printer.vue
Normal file
121
src/components/common/printer.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div>
|
||||
<slot name="paper" :content="content"></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
//内容
|
||||
printerInfo: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//速度
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
//延迟
|
||||
delay: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
},
|
||||
working: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
once: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: "",
|
||||
cursor: 0,
|
||||
timer: null,
|
||||
timeout: null,
|
||||
print: true
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.working) {
|
||||
//this.work：引用函数
|
||||
//this.work()：执行函数
|
||||
this.start(this.work);
|
||||
} else {
|
||||
this.content = this.printerInfo
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
working(newVal) {
|
||||
this.toBegin();
|
||||
},
|
||||
printerInfo(newVal) {
|
||||
this.toBegin();
|
||||
},
|
||||
cursor(cursor) {
|
||||
//slice(start,end)：不包含end
|
||||
this.content = this.printerInfo.slice(0, cursor)
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 定时
|
||||
*/
|
||||
start(work) {
|
||||
//延迟
|
||||
this.timeout = setTimeout(() => {
|
||||
//速度
|
||||
this.timer = setInterval(() => {
|
||||
work();
|
||||
if (this.cursor === 0 || (this.cursor === this.printerInfo.length && !this.once)) {
|
||||
//此处为了延迟
|
||||
clearInterval(this.timer);
|
||||
this.start(this.work);
|
||||
} else if (this.cursor === this.printerInfo.length && this.once) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
}, this.duration);
|
||||
}, this.delay)
|
||||
},
|
||||
/**
|
||||
* 逻辑
|
||||
*/
|
||||
work() {
|
||||
let cursor = this.cursor;
|
||||
cursor += this.print ? 1 : -1;
|
||||
if (this.print) {
|
||||
if (cursor === this.printerInfo.length + 1) {
|
||||
cursor -= 2;
|
||||
this.print = !this.print;
|
||||
}
|
||||
} else {
|
||||
if (cursor === -1) {
|
||||
cursor += 2;
|
||||
this.print = !this.print;
|
||||
}
|
||||
}
|
||||
this.cursor = cursor;
|
||||
},
|
||||
toBegin() {
|
||||
this.cursor = 0;
|
||||
if (this.timeout !== null) {
|
||||
clearTimeout(this.timeout);
|
||||
if (this.timer !== null) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
}
|
||||
if (this.working) {
|
||||
this.start(this.work);
|
||||
} else {
|
||||
this.content = this.printerInfo;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
72
src/components/common/proButton.vue
Normal file
72
src/components/common/proButton.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="myButton">
|
||||
<div :style="beforeColor">{{info}}</div>
|
||||
<div :style="afterColor">{{info}}</div>
|
||||
<div :style="afterColor">{{info}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
info: {
|
||||
type: String,
|
||||
default: "确定"
|
||||
},
|
||||
before: {
|
||||
type: String
|
||||
},
|
||||
after: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
beforeColor: {"background": this.before},
|
||||
afterColor: {"background": this.after}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.myButton {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
width: 66px;
|
||||
height: 33px;
|
||||
border-radius: 4px;
|
||||
color: var(--white);
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.myButton div {
|
||||
width: 66px;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.myButton div:nth-child(2) {
|
||||
width: 100px;
|
||||
transition: all 0.3s ease;
|
||||
transform: translateX(-120px) skewX(-30deg);
|
||||
}
|
||||
|
||||
.myButton div:nth-child(3) {
|
||||
transition: all 0.3s ease;
|
||||
transform: translateX(-120px);
|
||||
}
|
||||
|
||||
.myButton:hover div:nth-child(2) {
|
||||
transform: translateX(20px) skewX(-30deg);
|
||||
}
|
||||
|
||||
.myButton:hover div:nth-child(3) {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
</style>
|
||||
131
src/components/common/proPage.vue
Normal file
131
src/components/common/proPage.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div v-if="total > size" class="myCenter">
|
||||
<ul class="page-content">
|
||||
<li class="page-item" v-if="current !== 1" @click="toPage(-1)">
|
||||
👈
|
||||
</li>
|
||||
<template v-if="current === 1">
|
||||
<li class="page-item"
|
||||
:style="{background: index === 1 ? color : '', color: index === 1 ? 'var(--white)' : ''}"
|
||||
v-for="index of realButtonSize"
|
||||
:key="index"
|
||||
@click="toPage(index)">
|
||||
{{index}}
|
||||
</li>
|
||||
</template>
|
||||
<template v-else-if="current === totalSize">
|
||||
<li class="page-item"
|
||||
:style="{background: index === realButtonSize ? color : '', color: index === realButtonSize ? 'var(--white)' : ''}"
|
||||
v-for="index of realButtonSize"
|
||||
:key="index"
|
||||
@click="toPage(current - (realButtonSize - index))">
|
||||
{{current - (realButtonSize - index)}}
|
||||
</li>
|
||||
</template>
|
||||
<template v-else>
|
||||
<li class="page-item"
|
||||
:style="{background: Math.ceil(realButtonSize/2) - index === 0 ? color : '', color: Math.ceil(realButtonSize/2) - index === 0 ? 'var(--white)' : ''}"
|
||||
v-for="index of realButtonSize"
|
||||
:key="index"
|
||||
@click="toPage(current - (Math.ceil(realButtonSize/2) - index))">
|
||||
{{current - (Math.ceil(realButtonSize/2) - index)}}
|
||||
</li>
|
||||
</template>
|
||||
<li class="page-item" v-if="current !== totalSize" @click="toPage(-2)">
|
||||
👉
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
current: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
buttonSize: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
totalSize: 0,
|
||||
realButtonSize: 0
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {
|
||||
total(newVal) {
|
||||
this.totalSize = Math.ceil(this.total / this.size);
|
||||
this.realButtonSize = this.buttonSize < this.totalSize ? this.buttonSize : this.totalSize;
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.totalSize = Math.ceil(this.total / this.size);
|
||||
this.realButtonSize = this.buttonSize < this.totalSize ? this.buttonSize : this.totalSize;
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
toPage(flag) {
|
||||
if (flag === -1) {
|
||||
this.$emit("toPage", this.current - 1);
|
||||
} else if (flag === -2) {
|
||||
this.$emit("toPage", this.current + 1);
|
||||
} else {
|
||||
this.$emit("toPage", flag);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.page-content {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
margin: 0 10px;
|
||||
list-style: none;
|
||||
border: 1px solid var(--lightGray);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
color: var(--black);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page-item:hover {
|
||||
border: 1px solid var(--themeBackground);
|
||||
box-shadow: 0 0 5px var(--themeBackground);
|
||||
}
|
||||
</style>
|
||||
39
src/components/common/proTag.vue
Normal file
39
src/components/common/proTag.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="myTag" :style="bg">
|
||||
<span class="name">🔖 {{info}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
info: {
|
||||
type: String,
|
||||
default: "一只小毛驴"
|
||||
},
|
||||
color: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bg: {"background": this.color}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.myTag {
|
||||
cursor: pointer;
|
||||
color: var(--white);
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.myTag:hover {
|
||||
background: var(--gradualRed) !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
112
src/components/common/process.vue
Normal file
112
src/components/common/process.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div v-if="!$common.isEmpty(treeHoleList)">
|
||||
<div class="process-line">
|
||||
<div class="process-item"
|
||||
v-for="(treeHole, index) in treeHoleList"
|
||||
:key="index">
|
||||
<div class="timeline-item-time">
|
||||
<span>
|
||||
{{$common.getDateDiff(treeHole.createTime)}}
|
||||
</span>
|
||||
<span @click="deleteTreeHole(treeHole.id)"
|
||||
class="process-delete"
|
||||
v-if="!$common.isEmpty($store.state.currentUser) && $store.state.currentUser.id === treeHole.userId">
|
||||
<svg viewBox="0 0 1024 1024" width="16" height="16" style="vertical-align: -3px">
|
||||
<path
|
||||
d="M921.1392 155.392h-270.592v-48.2816c0-22.7328-18.432-41.1648-41.1648-41.1648H426.3424a41.1648 41.1648 0 0 0-41.1648 41.1648v48.2816H110.6432c-14.1312 0-25.6 11.4688-25.6 25.6s11.4688 25.6 25.6 25.6h810.496c14.1312 0 25.6-11.4688 25.6-25.6s-11.4688-25.6-25.6-25.6zM170.8032 260.0448v592.8448c0 50.8928 41.2672 92.16 92.16 92.16h500.6848c50.8928 0 92.16-41.2672 92.16-92.16V260.0448H170.8032z m249.1392 462.7968c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V443.0848c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v279.7568z m243.1488 0c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V443.0848c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v279.7568z"
|
||||
fill="#FF623E"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="timeline-item-content" v-html="treeHole.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
treeHoleList: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$common.imgShow(".process-line .pictureReg");
|
||||
},
|
||||
|
||||
methods: {
|
||||
deleteTreeHole(id) {
|
||||
this.$emit("deleteTreeHole", id);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.process-line {
|
||||
border-left: 2px solid var(--lightGreen);
|
||||
padding: 50px 20px 10px;
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.process-line:before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 4px solid var(--maxLightRed);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: -1px;
|
||||
transform: translateX(-50%);
|
||||
background-color: var(--white);
|
||||
animation: weiYanShadowFlashing 1.5s linear infinite;
|
||||
}
|
||||
|
||||
.process-item {
|
||||
position: relative;
|
||||
margin: 10px;
|
||||
color: var(--fontColor);
|
||||
}
|
||||
|
||||
.timeline-item-time::before {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: -37px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 3px solid var(--blue);
|
||||
border-radius: 50%;
|
||||
background: var(--white);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.timeline-item-content {
|
||||
padding: 12px 15px;
|
||||
margin: 10px 0 15px;
|
||||
border-radius: 10px;
|
||||
background: rgba(66, 139, 202, 0.2);
|
||||
}
|
||||
|
||||
.process-delete {
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
264
src/components/common/sortArticle.vue
Normal file
264
src/components/common/sortArticle.vue
Normal file
@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<div v-if="!$common.isEmpty(articleList)" class="recent-post-container">
|
||||
<div class="recent-post-item shadow-box background-opacity wow"
|
||||
v-for="(article, index) in articleList"
|
||||
:key="index"
|
||||
@click="$router.push({path: `/article/${article.id}`})">
|
||||
<!-- 封面 -->
|
||||
<div class="recent-post-item-image">
|
||||
<el-image class="my-el-image"
|
||||
v-once
|
||||
lazy
|
||||
:src="article.articleCover"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot myCenter" style="background-color: var(--lightGreen)">
|
||||
<div class="error-text">
|
||||
<div>遇事不决，可问春风</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-image>
|
||||
<div class="transformCenter hasVideo" v-if="article.hasVideo">
|
||||
<svg viewBox="0 0 1024 1024" width="60" height="60">
|
||||
<path
|
||||
d="M514 114.3c-219.9 0-398.9 178.9-398.9 398.9 0.1 219.9 179 398.8 398.9 398.8 219.9 0 398.8-178.9 398.8-398.8S733.9 114.3 514 114.3z m173 421.9L437.1 680.5c-17.7 10.2-39.8-2.6-39.8-23V368.9c0-20.4 22.1-33.2 39.8-23L687 490.2c17.7 10.2 17.7 35.8 0 46z"
|
||||
fill="#0C0C0C"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="recent-post-item-post">
|
||||
<!-- 时间 -->
|
||||
<div class="post-meta">
|
||||
<svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
|
||||
<path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#409EFF"></path>
|
||||
<path
|
||||
d="M654.222222 256c-17.066667 0-28.444444 11.377778-28.444444 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444444 28.444445s28.444444-11.377778 28.444445-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444445-28.444444zM369.777778 256c-17.066667 0-28.444444 11.377778-28.444445 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444445 28.444445s28.444444-11.377778 28.444444-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444444-28.444444z"
|
||||
fill="#FFFFFF"></path>
|
||||
<path
|
||||
d="M725.333333 312.888889H711.111111v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-170.666666v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-14.222222c-22.755556 0-42.666667 19.911111-42.666667 42.666667v341.333333c0 22.755556 19.911111 42.666667 42.666667 42.666667h426.666666c22.755556 0 42.666667-19.911111 42.666667-42.666667v-341.333333c0-22.755556-19.911111-42.666667-42.666667-42.666667zM426.666667 654.222222h-56.888889c-17.066667 0-28.444444-11.377778-28.444445-28.444444s11.377778-28.444444 28.444445-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444444 28.444445s-11.377778 28.444444-28.444444 28.444444z m227.555555 0h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444445s-11.377778 28.444444-28.444445 28.444444z m0-113.777778h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444444h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444444s-11.377778 28.444444-28.444445 28.444444z"
|
||||
fill="#FFFFFF"></path>
|
||||
</svg>
|
||||
发布于 {{ article.createTime }}
|
||||
</div>
|
||||
<!-- 标题 -->
|
||||
|
||||
<el-tooltip placement="top" effect="light">
|
||||
<div slot="content">{{ article.articleTitle }}</div>
|
||||
<h3>{{ article.articleTitle }}</h3>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 信息 -->
|
||||
<div class="post-meta" style="margin-bottom: 10px">
|
||||
<span>
|
||||
<svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
|
||||
<path d="M14.656 512a497.344 497.344 0 1 0 994.688 0 497.344 497.344 0 1 0-994.688 0z"
|
||||
fill="#FF0000"></path>
|
||||
<path
|
||||
d="M374.976 872.64c-48.299-100.032-22.592-157.44 14.421-211.37 40.448-58.966 51.115-117.611 51.115-117.611s31.659 41.386 19.115 106.005c56.149-62.72 66.816-162.133 58.325-200.405 127.317 88.746 181.59 281.002 108.181 423.381C1016 652.501 723.093 323.2 672.277 285.867c16.939 37.333 20.054 100.032-14.101 130.474-58.027-219.84-201.664-265.002-201.664-265.002 16.96 113.536-61.781 237.397-137.344 330.24-2.816-45.163-5.632-76.544-29.483-119.808-5.333 82.176-68.373 149.269-85.29 231.445-22.912 111.637 17.237 193.173 170.581 279.424z"
|
||||
fill="#FFFFFF"></path>
|
||||
</svg> {{ article.viewCount }} 热度
|
||||
</span>
|
||||
<span>
|
||||
<svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
|
||||
<path
|
||||
d="M113.834667 291.84v449.194667a29.013333 29.013333 0 0 0 28.842666 29.013333h252.928v90.453333l160.597334-90.453333h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333h-665.6a29.013333 29.013333 0 0 0-29.696 29.013333z"
|
||||
fill="#FFDEAD"></path>
|
||||
<path
|
||||
d="M809.130667 262.826667h-665.6a29.013333 29.013333 0 0 0-28.842667 29.013333v40.106667a29.013333 29.013333 0 0 1 28.842667-29.013334h665.6a29.013333 29.013333 0 0 1 29.013333 29.013334V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333z"
|
||||
fill="#FFF3DB"></path>
|
||||
<path
|
||||
d="M556.202667 770.048h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V362.837333s-59.733333 392.533333-724.309333 314.709334v63.488a29.013333 29.013333 0 0 0 28.842666 29.013333h253.098667v90.453333z"
|
||||
fill="#F2C182"></path>
|
||||
<path
|
||||
d="M619.008 632.32l101.888-35.157333-131.754667-76.117334 29.866667 111.274667zM891.904 148.992a61.44 61.44 0 0 0-84.138667 22.528l-19.968 34.133333 106.666667 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-22.528-84.138667z"
|
||||
fill="#69BAF9"></path>
|
||||
<path d="M775.338667 198.775467l131.669333 76.032-186.026667 322.218666-131.6864-76.032z"
|
||||
fill="#F7FBFF"></path>
|
||||
<path
|
||||
d="M775.168 198.826667l-5.290667 9.216 59.221334 34.133333a34.133333 34.133333 0 0 1 12.458666 46.592l-139.946666 242.346667a34.133333 34.133333 0 0 1-46.762667 12.629333l-59.050667-34.133333-6.656 11.434666 88.746667 51.2L720.896 597.333333l186.026667-322.56z"
|
||||
fill="#D8E3F0"></path>
|
||||
<path
|
||||
d="M616.448 622.592l2.56 9.728 101.888-35.157333-44.885333-25.941334-59.562667 51.370667zM891.904 148.992c-1.024 0-2.218667-0.853333-3.242667-1.536A61.610667 61.610667 0 0 1 887.466667 204.8l-19.968 34.133333-73.728-42.496-5.12 8.704 106.666666 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-23.381333-83.626667z"
|
||||
fill="#599ED4"></path>
|
||||
<path
|
||||
d="M265.898667 417.621333H494.933333a17.066667 17.066667 0 1 0 0-34.133333H265.898667a17.066667 17.066667 0 1 0 0 34.133333zM265.898667 533.504H494.933333a17.066667 17.066667 0 0 0 0-34.133333H265.898667a17.066667 17.066667 0 0 0 0 34.133333z"
|
||||
fill="#3D3D63"></path>
|
||||
<path
|
||||
d="M959.488 354.645333a99.84 99.84 0 0 0-23.722667-127.488 78.677333 78.677333 0 0 0-142.848-64.170666l-11.605333 20.138666a17.066667 17.066667 0 0 0-20.821333 7.168l-32.085334 55.466667H142.677333a46.250667 46.250667 0 0 0-45.909333 46.08v449.194667a46.08 46.08 0 0 0 45.909333 46.08h236.032v73.386666a17.066667 17.066667 0 0 0 8.362667 14.848 17.066667 17.066667 0 0 0 8.704 2.218667 17.066667 17.066667 0 0 0 8.362667-2.218667l156.672-88.234666h248.32a46.08 46.08 0 0 0 46.08-46.08V398.677333L921.6 283.306667a17.066667 17.066667 0 0 0-4.266667-21.504l1.877334-3.413334a65.365333 65.365333 0 0 1 10.410666 79.189334l-53.077333 91.989333a56.832 56.832 0 0 0 20.821333 77.653333 17.066667 17.066667 0 0 0 24.234667-6.314666 17.066667 17.066667 0 0 0-6.997333-23.04 23.04 23.04 0 0 1-8.362667-31.061334z m-138.410667 386.389334a11.946667 11.946667 0 0 1-11.946666 11.946666H556.202667a17.066667 17.066667 0 0 0-8.362667 2.218667l-134.997333 76.117333v-61.269333a17.066667 17.066667 0 0 0-17.066667-17.066667H142.677333a11.946667 11.946667 0 0 1-11.776-11.946666V291.84a11.946667 11.946667 0 0 1 11.776-11.946667h565.930667L574.464 512a17.066667 17.066667 0 0 0-1.706667 12.970667L597.333333 615.253333H265.898667a17.066667 17.066667 0 1 0 0 34.133334h352.938666a17.066667 17.066667 0 0 0 5.802667 0l102.4-35.328a17.066667 17.066667 0 0 0 9.216-7.509334l85.333333-147.968z m-204.8-184.661334l63.829334 36.864-49.322667 17.066667z m206.848-170.666666v1.365333l-108.373333 186.709333-102.4-59.050666L781.482667 221.866667l102.4 59.050666z m76.458667-161.28L887.466667 244.224l-76.970667-44.373333 11.264-19.797334a44.544 44.544 0 1 1 77.141333 44.544z"
|
||||
fill="#3D3D63"></path>
|
||||
</svg> {{ article.commentCount }} 条评论
|
||||
</span>
|
||||
<span>
|
||||
<svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
|
||||
<path
|
||||
d="M510.671749 348.792894S340.102978 48.827055 134.243447 254.685563C-97.636714 486.565724 510.671749 913.435858 510.671749 913.435858s616.107079-419.070494 376.428301-658.749272c-194.095603-194.096626-376.428302 94.106308-376.428301 94.106308z"
|
||||
fill="#FF713C"></path>
|
||||
<path
|
||||
d="M510.666632 929.674705c-3.267417 0-6.534833-0.983397-9.326413-2.950192-16.924461-11.872399-414.71121-293.557896-435.220312-529.448394-5.170766-59.482743 13.879102-111.319341 56.643068-154.075121 51.043536-51.043536 104.911398-76.930113 160.095231-76.930114 112.524796 0 196.878996 106.48115 228.475622 153.195078 33.611515-45.214784 122.406864-148.20646 234.04343-148.20646 53.930283 0 105.46603 24.205285 153.210428 71.941496 45.063335 45.063335 64.954361 99.200326 59.133795 160.920016C935.306982 641.685641 536.758893 915.327952 519.80271 926.859589a16.205077 16.205077 0 0 1-9.136078 2.815116zM282.857183 198.75574c-46.25344 0-92.396363 22.682605-137.127124 67.413365-36.149315 36.157501-51.614541 78.120218-47.25321 128.291898 17.575284 202.089671 352.199481 455.119525 412.332023 499.049037 60.434417-42.86732 395.406538-289.147446 414.567947-492.458945 4.933359-52.344159-11.341303-96.465029-49.759288-134.88199-41.431621-41.423435-85.24243-62.424748-130.242319-62.424748-122.041544 0-220.005716 152.203494-220.989114 153.742547-3.045359 4.806469-8.53335 7.883551-14.101159 7.534603a16.257266 16.257266 0 0 1-13.736863-8.184403c-0.902556-1.587148-91.569532-158.081365-213.690893-158.081364z"
|
||||
fill="#885F44"></path>
|
||||
</svg> {{ article.likeCount }} 点赞
|
||||
</span>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="recent-post-desc">
|
||||
{{ article.articleContent }}
|
||||
</div>
|
||||
<!-- 分类 标签 -->
|
||||
<div class="sort-label">
|
||||
<span style="margin-right: 12px"
|
||||
@click.stop="$router.push({path: '/sort', query: {sortId: article.sortId}})">
|
||||
<svg viewBox="0 0 1024 1024" width="15" height="15" style="vertical-align: -3px;">
|
||||
<path
|
||||
d="M179.2 153.6m89.6 0l588.8 0q89.6 0 89.6 89.6l0 486.4q0 89.6-89.6 89.6l-588.8 0q-89.6 0-89.6-89.6l0-486.4q0-89.6 89.6-89.6Z"
|
||||
fill="#FF9C55"></path>
|
||||
<path
|
||||
d="M25.6 193.4208A91.0208 91.0208 0 0 1 116.6208 102.4H382.592a91.0208 91.0208 0 0 1 87.5008 65.9712l24.5504 85.7216h412.7488A91.0208 91.0208 0 0 1 998.4 345.1392v485.4528A91.0208 91.0208 0 0 1 907.3792 921.6H116.608A91.0208 91.0208 0 0 1 25.6 830.5792V193.408z"
|
||||
fill="#FFD977"></path>
|
||||
<path
|
||||
d="M128 665.6m25.6 0l76.8 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-76.8 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
|
||||
fill="#FFF1C9"></path>
|
||||
<path
|
||||
d="M128 768m25.6 0l179.2 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-179.2 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
|
||||
fill="#FFF1C9"></path>
|
||||
<path
|
||||
d="M128 486.4m51.2 0l0 0q51.2 0 51.2 51.2l0 0q0 51.2-51.2 51.2l0 0q-51.2 0-51.2-51.2l0 0q0-51.2 51.2-51.2Z"
|
||||
fill="#FFA86A"></path>
|
||||
</svg> {{ article.sort.sortName }}
|
||||
</span>
|
||||
<span @click.stop="$router.push({path: '/sort', query: {sortId: article.sortId, labelId: article.labelId}})">
|
||||
<svg viewBox="0 0 1024 1024" width="15" height="15" style="vertical-align: -3px;">
|
||||
<path
|
||||
d="M905.0112 560.4352l-342.784 342.784c-56.7808 56.7808-148.7872 56.7808-205.568 0l-231.5776-231.5776c-56.7808-56.7808-56.7808-148.7872 0-205.568l342.9376-342.9376a114.8928 114.8928 0 0 1 84.224-33.5872l266.3936 7.2192c60.7744 1.6384 109.7216 50.3808 111.5648 111.1552l8.2944 267.8272c1.024 31.6928-11.1104 62.3104-33.4848 84.6848z"
|
||||
fill="#8C7BFD"></path>
|
||||
<path
|
||||
d="M675.2256 491.4688c-82.176 0-149.0432-66.8672-149.0432-149.0432s66.8672-149.0432 149.0432-149.0432 149.0432 66.8672 149.0432 149.0432-66.8672 149.0432-149.0432 149.0432z m0-192.2048c-23.808 0-43.2128 19.3536-43.2128 43.2128 0 23.808 19.3536 43.2128 43.2128 43.2128 23.808 0 43.2128-19.3536 43.2128-43.2128s-19.4048-43.2128-43.2128-43.2128z"
|
||||
fill="#FFE37B"></path>
|
||||
</svg> {{ article.label.labelName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
articleList: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.recent-post-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.recent-post-item {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin: 10px;
|
||||
height: 350px;
|
||||
flex-shrink: 0;
|
||||
width: calc(100% / 3 - 20px);
|
||||
cursor: pointer;
|
||||
animation: zoomIn 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
.recent-post-item-image {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.recent-post-item-image >>> .el-image__inner {
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.recent-post-item-image >>> .el-image__inner:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.recent-post-item-post {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.recent-post-item-post h3 {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 12px;
|
||||
color: var(--greyFont);
|
||||
}
|
||||
|
||||
.recent-post-desc {
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.sort-label {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.sort-label span {
|
||||
padding: 2px 4px;
|
||||
background-color: var(--maxLightGray);
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
color: var(--greyFont);
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sort-label span:hover {
|
||||
background-color: var(--themeBackground);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.error-text {
|
||||
font-size: 20px;
|
||||
line-height: 1.8;
|
||||
letter-spacing: 4px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.hasVideo {
|
||||
padding: 0 20px;
|
||||
background: var(--maxMaxWhiteMask);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.recent-post-item {
|
||||
width: calc(100% / 2 - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.recent-post-item {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
273
src/components/common/treeHole.vue
Normal file
273
src/components/common/treeHole.vue
Normal file
@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="tree-hole-container">
|
||||
<ol class="tree-hole-list" v-if="!$common.isEmpty(treeHoleList)">
|
||||
<li class="tree-hole-li"
|
||||
v-for="(treeHole, index) in treeHoleList"
|
||||
:key="index">
|
||||
<div class="tree-hole-content"
|
||||
:class="{ leftTreeHole: index % 2 === 0 && !$common.mobile(), rightTreeHole: index % 2 !== 0 || $common.mobile() }">
|
||||
<el-avatar shape="square" class="avatar-img" :size="36"
|
||||
:src="avatar"></el-avatar>
|
||||
<div class="tree-hole-box"
|
||||
:style="{background: $constant.tree_hole_color[index % $constant.tree_hole_color.length]}">
|
||||
<div class="box-tag" v-if="index % 2 === 0 && !$common.mobile()"
|
||||
:style="{'border-color': 'transparent transparent transparent '+$constant.tree_hole_color[index % $constant.tree_hole_color.length]}"></div>
|
||||
<div class="box-tag" v-if="index % 2 !== 0 || $common.mobile()"
|
||||
:style="{'border-color': 'transparent '+$constant.tree_hole_color[index % $constant.tree_hole_color.length]+' transparent transparent'}"></div>
|
||||
<div class="my-content" v-html="treeHole.content"></div>
|
||||
<div style="display: flex;justify-content: space-between">
|
||||
<div>😃 {{treeHole.createTime}}</div>
|
||||
<div @click="deleteTreeHole(treeHole.id)"
|
||||
class="tree-hole-delete"
|
||||
v-if="!$common.isEmpty($store.state.currentUser) && $store.state.currentUser.id === treeHole.userId">
|
||||
<svg viewBox="0 0 1024 1024" width="18" height="18" style="vertical-align: -2px;">
|
||||
<path
|
||||
d="M921.1392 155.392h-270.592v-48.2816c0-22.7328-18.432-41.1648-41.1648-41.1648H426.3424a41.1648 41.1648 0 0 0-41.1648 41.1648v48.2816H110.6432c-14.1312 0-25.6 11.4688-25.6 25.6s11.4688 25.6 25.6 25.6h810.496c14.1312 0 25.6-11.4688 25.6-25.6s-11.4688-25.6-25.6-25.6zM170.8032 260.0448v592.8448c0 50.8928 41.2672 92.16 92.16 92.16h500.6848c50.8928 0 92.16-41.2672 92.16-92.16V260.0448H170.8032z m249.1392 462.7968c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V443.0848c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v279.7568z m243.1488 0c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V443.0848c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v279.7568z"
|
||||
fill="#FF623E"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="tree-hole-go">
|
||||
<i class="fa fa-paper-plane" @click="launch()"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
treeHoleList: {
|
||||
type: Array
|
||||
},
|
||||
avatar: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
launch() {
|
||||
this.$emit("launch");
|
||||
},
|
||||
deleteTreeHole(id) {
|
||||
this.$emit("deleteTreeHole", id);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.tree-hole-container {
|
||||
padding: 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tree-hole-list {
|
||||
padding: 100px 0 20px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tree-hole-list:before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: var(--themeBackground);
|
||||
}
|
||||
|
||||
.tree-hole-list:after {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 4px solid var(--maxLightRed);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: var(--white);
|
||||
animation: weiYanShadowFlashing 1.5s linear infinite;
|
||||
}
|
||||
|
||||
.tree-hole-li {
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
||||
.tree-hole-content {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.leftTreeHole {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rightTreeHole {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.tree-hole-content:before {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 4px solid var(--blue);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
.leftTreeHole:before {
|
||||
right: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.rightTreeHole:before {
|
||||
left: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.leftTreeHole .avatar-img {
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.rightTreeHole .avatar-img {
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
.tree-hole-box {
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
width: 360px;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 400;
|
||||
transition: all 0.3s ease-in-out;
|
||||
color: var(--black);
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.leftTreeHole .tree-hole-box {
|
||||
margin-right: 90px;
|
||||
}
|
||||
|
||||
.rightTreeHole .tree-hole-box {
|
||||
margin-left: 90px;
|
||||
}
|
||||
|
||||
.tree-hole-box:hover, .avatar-img:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 0 16px 3px var(--miniMask);
|
||||
}
|
||||
|
||||
.box-tag {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.leftTreeHole .box-tag {
|
||||
right: -10px;
|
||||
border-width: 15px 0 5px 10px;
|
||||
}
|
||||
|
||||
.rightTreeHole .box-tag {
|
||||
left: -10px;
|
||||
border-width: 15px 10px 5px 0;
|
||||
}
|
||||
|
||||
.my-content {
|
||||
margin: 0 10px 10px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.tree-hole-box > div:last-child {
|
||||
color: var(--greyFont);
|
||||
padding: 10px 10px 0;
|
||||
border-top: 1px dashed var(--white);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tree-hole-go {
|
||||
color: var(--blue);
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tree-hole-go i {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tree-hole-go i:hover {
|
||||
animation: scale 1s linear infinite;
|
||||
}
|
||||
|
||||
.tree-hole-delete {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.tree-hole-box {
|
||||
width: calc(100% - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.tree-hole-content {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.tree-hole-list:after {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.tree-hole-list:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.rightTreeHole {
|
||||
margin-left: unset;
|
||||
}
|
||||
|
||||
.tree-hole-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
141
src/components/common/twoPoem.vue
Normal file
141
src/components/common/twoPoem.vue
Normal file
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="poem-container myCenter my-animation-hideToShow"
|
||||
v-if="!$common.isEmpty(guShi.origin) || !$common.isEmpty(hitokoto.hitokoto)">
|
||||
<!-- 背景图片 -->
|
||||
<el-image class="my-el-image poem-image"
|
||||
style="position: absolute;margin-top: -50px"
|
||||
v-once
|
||||
lazy
|
||||
:src="$store.state.webInfo.randomCover[Math.floor(Math.random() * $store.state.webInfo.randomCover.length)]"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot"></div>
|
||||
</el-image>
|
||||
<div class="poem-wrap">
|
||||
<div v-if="isShehui"><span>鬼畜全明星</span></div>
|
||||
<div v-else><span>{{isHitokoto?hitokoto.from:guShi.origin}}</span></div>
|
||||
<p class="poem">{{isHitokoto?hitokoto.hitokoto:guShi.content}}</p>
|
||||
<p class="info" v-if="!isShehui && (!isHitokoto || (isHitokoto && !$common.isEmpty(hitokoto.from_who)))">
|
||||
{{isHitokoto?hitokoto.from_who:guShi.author}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
isHitokoto: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
isShehui: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
guShi: {
|
||||
"content": "...",
|
||||
"origin": "...",
|
||||
"author": "...",
|
||||
"category": "..."
|
||||
},
|
||||
hitokoto: {
|
||||
"hitokoto": "...",
|
||||
"from": "...",
|
||||
"from_who": "..."
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (!this.isShehui) {
|
||||
if (this.isHitokoto) {
|
||||
this.getHitokoto();
|
||||
} else {
|
||||
this.getGuShi();
|
||||
}
|
||||
} else {
|
||||
this.hitokoto.from = "";
|
||||
this.hitokoto.from_who = "";
|
||||
this.sendShehui();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
sendShehui() {
|
||||
let that = this;
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('get', this.$constant.shehui);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
let shehui = xhr.responseText;
|
||||
that.hitokoto.hitokoto = shehui.substring(1, shehui.length - 1);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
},
|
||||
getGuShi() {
|
||||
let that = this;
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('get', this.$constant.jinrishici);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
that.guShi = JSON.parse(xhr.responseText);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
},
|
||||
getHitokoto() {
|
||||
let that = this;
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('get', this.$constant.hitokoto);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
that.hitokoto = JSON.parse(xhr.responseText);
|
||||
}
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.poem-container {
|
||||
padding: 90px 0 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.poem-wrap {
|
||||
border-radius: 10px;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
letter-spacing: 4px;
|
||||
font-weight: 300;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.poem-wrap div span {
|
||||
padding: 5px 10px;
|
||||
color: var(--white);
|
||||
font-size: 2em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.poem-wrap p {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.poem-wrap p.poem {
|
||||
margin: 40px auto;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.poem-wrap p.info {
|
||||
margin: 20px auto 40px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
</style>
|
||||
199
src/components/common/uploadPicture.vue
Normal file
199
src/components/common/uploadPicture.vue
Normal file
@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
multiple
|
||||
drag
|
||||
:action="''"
|
||||
:on-change="handleChange"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:on-remove="handleRemove"
|
||||
:http-request="customUpload"
|
||||
:list-type="listType"
|
||||
:accept="accept"
|
||||
:limit="maxNumber"
|
||||
:auto-upload="false">
|
||||
<div class="el-upload__text">
|
||||
<svg viewBox="0 0 1024 1024" width="40" height="40">
|
||||
<path
|
||||
d="M666.2656 629.4528l-113.7664-112.4864c-20.7872-20.5824-54.3232-20.5312-75.1104 0.1024l-113.3056 112.4864c-20.8896 20.736-21.0432 54.528-0.256 75.4688 20.736 20.8896 54.528 21.0432 75.4688 0.256l22.6304-22.4256v189.5936c0 29.44 23.9104 53.3504 53.3504 53.3504s53.3504-23.9104 53.3504-53.3504v-189.5424l22.6816 22.4256a53.1456 53.1456 0 0 0 37.5296 15.4112c13.7728 0 27.4944-5.2736 37.9392-15.8208 20.6336-20.9408 20.4288-54.7328-0.512-75.4688z"
|
||||
fill="#FFE37B"></path>
|
||||
<path
|
||||
d="M820.992 469.504h-5.376c-3.072-163.328-136.3456-294.8096-300.4416-294.8096S217.856 306.1248 214.784 469.504H209.408c-100.7104 0-182.3744 81.664-182.3744 182.3744s81.664 182.3744 182.3744 182.3744h209.7664V761.856c-30.208 5.5808-62.464-3.3792-85.6576-26.7264-37.3248-37.5808-37.0688-98.5088 0.512-135.7824l113.3056-112.4864c37.2224-36.9664 97.8432-37.0176 135.168-0.1536l113.7664 112.4864c18.2272 18.0224 28.3648 42.0864 28.5184 67.7376 0.1536 25.6512-9.728 49.8176-27.7504 68.0448a95.40096 95.40096 0 0 1-68.3008 28.5184c-5.9392 0-11.776-0.512-17.5104-1.5872v72.3456h209.7664c100.7104 0 182.3744-81.664 182.3744-182.3744S921.7024 469.504 820.992 469.504z"
|
||||
fill="#8C7BFD"></path>
|
||||
</svg>
|
||||
<div>拖拽上传 / 点击上传</div>
|
||||
</div>
|
||||
<template v-if="listType === 'picture'">
|
||||
<div slot="tip" class="el-upload__tip">
|
||||
一次最多上传{{maxNumber}}张图片，且每张图片不超过{{maxSize}}M！
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div slot="tip" class="el-upload__tip">
|
||||
一次最多上传{{maxNumber}}个文件，且每个文件不超过{{maxSize}}M！
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</el-upload>
|
||||
|
||||
<div style="text-align: center;margin-top: 20px">
|
||||
<el-button type="success" style="font-size: 12px" @click="submitUpload">
|
||||
上传
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import upload from '../../utils/ajaxUpload';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
isAdmin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
listType: {
|
||||
type: String,
|
||||
default: "picture"
|
||||
},
|
||||
storeType: {
|
||||
type: String,
|
||||
default: localStorage.getItem("defaultStoreType")
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default: "image/*"
|
||||
},
|
||||
maxSize: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
maxNumber: {
|
||||
type: Number,
|
||||
default: 5
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
submitUpload() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
|
||||
customUpload(options) {
|
||||
let suffix = "";
|
||||
if (options.file.name.lastIndexOf('.') !== -1) {
|
||||
suffix = options.file.name.substring(options.file.name.lastIndexOf('.'));
|
||||
}
|
||||
|
||||
let key = this.prefix + "/" + (!this.$common.isEmpty(this.$store.state.currentUser.username) ? (this.$store.state.currentUser.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentUser.id) : (this.$store.state.currentAdmin.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentAdmin.id)) + new Date().getTime() + Math.floor(Math.random() * 1000) + suffix;
|
||||
|
||||
if (this.storeType === "local") {
|
||||
let fd = new FormData();
|
||||
fd.append("file", options.file);
|
||||
fd.append("originalName", options.file.name);
|
||||
fd.append("key", key);
|
||||
fd.append("relativePath", key);
|
||||
fd.append("type", this.prefix);
|
||||
fd.append("storeType", this.storeType);
|
||||
|
||||
return this.$http.upload(this.$constant.baseURL + "/resource/upload", fd, this.isAdmin, options);
|
||||
} else if (this.storeType === "qiniu") {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('get', this.$constant.baseURL + "/qiniu/getUpToken?key=" + key, false);
|
||||
if (this.isAdmin) {
|
||||
xhr.setRequestHeader("Authorization", localStorage.getItem("adminToken"));
|
||||
} else {
|
||||
xhr.setRequestHeader("Authorization", localStorage.getItem("userToken"));
|
||||
}
|
||||
|
||||
try {
|
||||
xhr.send();
|
||||
const res = JSON.parse(xhr.responseText);
|
||||
if (res !== null && res.hasOwnProperty("code") && res.code === 200) {
|
||||
options.data = {
|
||||
token: res.data,
|
||||
key: key
|
||||
};
|
||||
options.action = this.$store.state.sysConfig.qiniuUrl;
|
||||
return upload(options);
|
||||
} else if (res !== null && res.hasOwnProperty("code") && res.code !== 200) {
|
||||
return Promise.reject(res.message);
|
||||
} else {
|
||||
return Promise.reject("服务异常！");
|
||||
}
|
||||
} catch (e) {
|
||||
return Promise.reject(e.message);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 文件上传成功时的钩子
|
||||
handleSuccess(response, file, fileList) {
|
||||
let url;
|
||||
if (this.storeType === "local") {
|
||||
url = response.data;
|
||||
} else if (this.storeType === "qiniu") {
|
||||
url = this.$store.state.sysConfig['qiniu.downloadUrl'] + response.key;
|
||||
this.$common.saveResource(this, this.prefix, url, file.size, file.raw.type, file.name, "qiniu", this.isAdmin);
|
||||
}
|
||||
this.$emit("addPicture", url);
|
||||
},
|
||||
handleError(err, file, fileList) {
|
||||
this.$message({
|
||||
message: err,
|
||||
type: "error"
|
||||
});
|
||||
},
|
||||
// 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
|
||||
beforeUpload(file) {
|
||||
},
|
||||
// 文件列表移除文件时的钩子
|
||||
handleRemove(file, fileList) {
|
||||
},
|
||||
// 添加文件、上传成功和上传失败时都会被调用
|
||||
handleChange(file, fileList) {
|
||||
let flag = false;
|
||||
|
||||
if (file.size > this.maxSize * 1024 * 1024) {
|
||||
this.$message({
|
||||
message: "图片最大为" + this.maxSize + "M！",
|
||||
type: "warning"
|
||||
});
|
||||
flag = true;
|
||||
}
|
||||
|
||||
if (flag) {
|
||||
fileList.splice(fileList.size - 1, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
175
src/components/common/videoPlayer.vue
Normal file
175
src/components/common/videoPlayer.vue
Normal file
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<video-player class="video-player-box"
|
||||
ref="videoPlayer"
|
||||
:options="playerOptions"
|
||||
:playsinline="true"
|
||||
|
||||
@play="onPlayerPlay($event)"
|
||||
@pause="onPlayerPause($event)"
|
||||
@ended="onPlayerEnded($event)"
|
||||
|
||||
@waiting="onPlayerWaiting($event)"
|
||||
@playing="onPlayerPlaying($event)"
|
||||
@loadeddata="onPlayerLoadeddata($event)"
|
||||
@timeupdate="onPlayerTimeupdate($event)"
|
||||
@canplay="onPlayerCanplay($event)"
|
||||
@canplaythrough="onPlayerCanplaythrough($event)"
|
||||
|
||||
@statechanged="playerStateChanged($event)"
|
||||
@ready="playerReadied($event)">
|
||||
</video-player>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import 'video.js/dist/video-js.css'
|
||||
import {videoPlayer} from 'vue-video-player'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
url: {
|
||||
type: Object
|
||||
},
|
||||
cover: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
components: {
|
||||
videoPlayer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
playerOptions: {
|
||||
//是否在页面加载后载入视频
|
||||
preload: 'metadata',
|
||||
aspectRatio: '16:9',
|
||||
//自适应宽高
|
||||
fluid: true,
|
||||
loop: false,
|
||||
muted: false,
|
||||
language: 'zh-CN',
|
||||
autoplay: false,
|
||||
//可选的播放速度
|
||||
playbackRates: [0.5, 1.0, 1.5, 2.0],
|
||||
sources: [{
|
||||
type: '',
|
||||
src: ''
|
||||
}],
|
||||
poster: '',
|
||||
notSupportedMessage: '此视频暂无法播放',
|
||||
controlBar: {
|
||||
//暂停和播放键
|
||||
playToggle: true,
|
||||
//进度条
|
||||
progressControl: true,
|
||||
//全屏按钮
|
||||
fullscreenToggle: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
player() {
|
||||
return this.$refs.videoPlayer.player;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
url: {
|
||||
handler(val) {
|
||||
this.playerOptions.sources[0].src = val.src;
|
||||
this.playerOptions.sources[0].type = val.type;
|
||||
this.playerOptions.poster = this.cover;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
//播放回调
|
||||
onPlayerPlay(player) {
|
||||
|
||||
},
|
||||
|
||||
//暂停回调
|
||||
onPlayerPause(player) {
|
||||
|
||||
},
|
||||
|
||||
//视频播完回调
|
||||
onPlayerEnded(player) {
|
||||
|
||||
},
|
||||
|
||||
//当播放由于暂时缺少数据而停止时，将触发该事件
|
||||
onPlayerWaiting(player) {
|
||||
|
||||
},
|
||||
|
||||
//在首次启动播放后以及每当重新启动时都会触发。例如，当播放因缺少数据而暂停或延迟后恢复时，将触发它
|
||||
onPlayerPlaying(player) {
|
||||
|
||||
},
|
||||
|
||||
//当前播放位置的视频帧（通常是第一帧）加载完成后触发
|
||||
onPlayerLoadeddata(player) {
|
||||
|
||||
},
|
||||
|
||||
//当currentTime更新时会触发timeupdate事件
|
||||
onPlayerTimeupdate(player) {
|
||||
|
||||
},
|
||||
|
||||
//在终端可以播放媒体文件时（但估计还没有加载足够的数据来播放媒体直到其结束，即后续可能需要停止以进一步缓冲内容）被触发
|
||||
onPlayerCanplay(player) {
|
||||
|
||||
},
|
||||
|
||||
//在终端可以播放媒体文件时（估计已经加载了足够的数据来播放媒体直到其结束，而不必停止以进一步缓冲内容）被触发
|
||||
onPlayerCanplaythrough(player) {
|
||||
|
||||
},
|
||||
|
||||
//播放状态改变回调
|
||||
playerStateChanged(player) {
|
||||
|
||||
},
|
||||
|
||||
//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数
|
||||
playerReadied(player) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.video-player-box {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vjs-big-play-button {
|
||||
left: 50% !important;
|
||||
top: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
785
src/components/common/zombie.vue
Normal file
785
src/components/common/zombie.vue
Normal file
@ -0,0 +1,785 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="zombie">
|
||||
<div class="zombie__head">
|
||||
<div class="zombie__brain"></div>
|
||||
<div class="zombie__cheeks"></div>
|
||||
<div class="zombie__chin"></div>
|
||||
<div class="zombie__eyes">
|
||||
<div class="eye left">
|
||||
<div class="eyebrow"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eyebrow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zombie__nose"></div>
|
||||
<div class="zombie__mouth">
|
||||
<div class="tooth">
|
||||
<div class="tooth__top"></div>
|
||||
<div class="tooth__bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zombie__body">
|
||||
<div class="zombie__chest">
|
||||
<div class="zombie__arms">
|
||||
<div class="arm left">
|
||||
<div class="arm__bone"></div>
|
||||
<div class="arm__sleeve"></div>
|
||||
</div>
|
||||
<div class="arm right">
|
||||
<div class="arm__details">
|
||||
<div class="arm__biceps"></div>
|
||||
<div class="arm__forearm"></div>
|
||||
<div class="hands">
|
||||
<div class="fingers">
|
||||
<div class="finger thumb"></div>
|
||||
<div class="finger middle"></div>
|
||||
<div class="finger index"></div>
|
||||
<div class="finger ring"></div>
|
||||
<div class="finger pinky"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arm__sleeve"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ground">
|
||||
<div class="ground__hole"></div>
|
||||
<div class="ground__rocks">
|
||||
<div class="rock"></div>
|
||||
<div class="rock"></div>
|
||||
<div class="rock"></div>
|
||||
<div class="rock"></div>
|
||||
<div class="rock"></div>
|
||||
<div class="rock"></div>
|
||||
<div class="rock"></div>
|
||||
<div class="rock"></div>
|
||||
<div class="rock"></div>
|
||||
<div class="rock"></div>
|
||||
<div class="rock"></div>
|
||||
<div class="rock"></div>
|
||||
<div class="rock"></div>
|
||||
<div class="rock"></div>
|
||||
<div class="rock"></div>
|
||||
</div>
|
||||
<div class="tomb">
|
||||
<div class="tomb__info">
|
||||
<h2 class="headers">{{$store.state.webInfo.webName}}</h2>
|
||||
<h4 class="headers">大爷进来玩啊~~~</h4>
|
||||
<h5 class="headers">网页有点慢，等一下就好啦~</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brains-comic-box">
|
||||
<h1 class="brains__text">loading...</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
@import url("https://fonts.googleapis.com/css?family=Creepster|Rye");
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #2c3e50;
|
||||
}
|
||||
|
||||
.zombie__cheeks::before,
|
||||
.zombie__cheeks::after {
|
||||
content: "";
|
||||
border-radius: 50% 0 0 50%;
|
||||
box-shadow: 4px 7px 6px 1px rgba(0, 0, 0, 0.09);
|
||||
background: #1abc9c;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.zombie__nose::before,
|
||||
.zombie__nose::after {
|
||||
content: "";
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50% 50% 10px 10px;
|
||||
background: #07362c;
|
||||
box-shadow: inset 0 8px 0 2px #148f77;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.tooth .tooth__top::before,
|
||||
.tooth .tooth__bottom::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
margin: 5px 20px 0 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.zombie__arms .left .arm__sleeve,
|
||||
.zombie__arms .right .arm__sleeve {
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
background: linear-gradient(to bottom, #593f35, #795548);
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #20332f;
|
||||
}
|
||||
|
||||
.zombie {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.zombie__head {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: #1abc9c;
|
||||
border-radius: 70% 70% 35% 35%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
animation: moveHead 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.zombie__head::before {
|
||||
content: "";
|
||||
width: 49px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 -2px 0 1px #1a252f;
|
||||
transform: translateX(24px) rotateZ(-53deg);
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.zombie__head::after {
|
||||
content: "";
|
||||
width: 29px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 -2px 0 1px #1a252f;
|
||||
transform: translateX(38px) rotateZ(-13deg);
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
.zombie__brain {
|
||||
width: 30px;
|
||||
height: 60px;
|
||||
background: #2c3e50;
|
||||
border-radius: 50%;
|
||||
transform: rotateZ(55deg);
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.zombie__brain::before {
|
||||
content: "";
|
||||
width: 30px;
|
||||
height: 80px;
|
||||
background: #e05887;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.zombie__brain::after {
|
||||
content: "";
|
||||
background: #e05887;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 40%;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 5px;
|
||||
box-shadow: -14px -8px 0 0px #e05887, -28px -10px 0 0px #e05887;
|
||||
transform: rotateZ(80deg);
|
||||
}
|
||||
|
||||
.zombie__cheeks {
|
||||
width: inherit;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-self: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 75px;
|
||||
}
|
||||
|
||||
.zombie__cheeks::before {
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.zombie__cheeks::after {
|
||||
transform: rotateY(180deg);
|
||||
margin-right: -12px;
|
||||
}
|
||||
|
||||
.zombie__eyes {
|
||||
width: inherit;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-self: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.zombie__eyes .eye {
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 5px 0px 1px rgba(0, 0, 0, 0.22), 0 13px 0px 0px rgba(0, 0, 0, 0.22);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zombie__eyes .eye::before {
|
||||
content: "";
|
||||
width: 16.66667px;
|
||||
height: 16.66667px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
display: table;
|
||||
margin: 20px auto;
|
||||
box-shadow: inset 0 -5px 0 5px #2c3e50, 0 0 0 3px #ff9800;
|
||||
}
|
||||
|
||||
.zombie__eyes .eye .eyebrow {
|
||||
width: inherit;
|
||||
height: 20px;
|
||||
background: #1abc9c;
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 0 1px #117964;
|
||||
top: -15px;
|
||||
animation: moveEyebrow 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.zombie__chin {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
background: #1abc9c;
|
||||
border-radius: 0 0 30% 30%;
|
||||
align-self: flex-end;
|
||||
position: absolute;
|
||||
left: 26px;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.zombie__nose {
|
||||
width: 25px;
|
||||
height: 80px;
|
||||
background: linear-gradient(to top, #148f77, #1abc9c);
|
||||
border-radius: 0 0 10px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
left: 63px;
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
.zombie__nose::before {
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.zombie__nose::after {
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
.zombie__mouth {
|
||||
width: 75px;
|
||||
background: #1a252f;
|
||||
border-radius: 20%/10% 10% 50% 50%;
|
||||
box-shadow: inset 0 6px 0 0px #e883a6, 0 0 0 4px #148f77;
|
||||
align-self: flex-end;
|
||||
position: absolute;
|
||||
left: 38px;
|
||||
bottom: -18px;
|
||||
overflow: hidden;
|
||||
animation: moveMouth 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.tooth {
|
||||
width: inherit;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tooth .tooth__top {
|
||||
position: relative;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.tooth .tooth__top::before {
|
||||
box-shadow: 15px 0px 0 0 #fff, 30px 0px 0 0 #fff, 45px 0px 0 0 #fff;
|
||||
}
|
||||
|
||||
.tooth .tooth__bottom {
|
||||
position: relative;
|
||||
right: -18px;
|
||||
bottom: -6px;
|
||||
}
|
||||
|
||||
.tooth .tooth__bottom::before {
|
||||
box-shadow: 15px 0px 0 0 #fff, 30px 0px 0 0 #fff;
|
||||
}
|
||||
|
||||
.zombie__chest {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
background: linear-gradient(to bottom, #593f35 40%, #795548);
|
||||
border-radius: 20px 20px 0 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.zombie__arms {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.zombie__arms .left {
|
||||
position: relative;
|
||||
animation: moveLeftArm 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.zombie__arms .left .arm__sleeve {
|
||||
transform: translateX(-25px) rotateZ(80deg);
|
||||
}
|
||||
|
||||
.zombie__arms .left .arm__bone {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background: #bfbfbf;
|
||||
position: absolute;
|
||||
left: -100px;
|
||||
top: 25px;
|
||||
transform: rotateZ(-10deg);
|
||||
}
|
||||
|
||||
.zombie__arms .left .arm__bone::before {
|
||||
content: "";
|
||||
background: inherit;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: -8px;
|
||||
border-radius: 40%/50% 0 30% 40%;
|
||||
transform: rotateZ(40deg);
|
||||
}
|
||||
|
||||
.zombie__arms .left .arm__bone::after {
|
||||
content: "";
|
||||
background: inherit;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
bottom: -6px;
|
||||
border-radius: 40%/50% 0 30% 40%;
|
||||
transform: rotateZ(40deg);
|
||||
}
|
||||
|
||||
.zombie__arms .right {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zombie__arms .right .arm__sleeve {
|
||||
transform: translateX(79px) rotateZ(-63deg);
|
||||
}
|
||||
|
||||
.zombie__arms .arm__biceps {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
background: #1abc9c;
|
||||
left: 95px;
|
||||
top: 40px;
|
||||
transform: rotateZ(25deg);
|
||||
}
|
||||
|
||||
.zombie__arms .arm__forearm {
|
||||
width: 38px;
|
||||
height: 45px;
|
||||
position: absolute;
|
||||
background: linear-gradient(to bottom, #148f77, #1abc9c);
|
||||
left: 160px;
|
||||
top: 55px;
|
||||
border-radius: 40%/90% 90% 0 0;
|
||||
transform: skewX(-10deg);
|
||||
box-shadow: -1px 0px 5px 1px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.hands {
|
||||
background: #1abc9c;
|
||||
width: 75px;
|
||||
height: 30px;
|
||||
border-radius: 30%/80% 40% 40% 40%;
|
||||
position: absolute;
|
||||
left: 135px;
|
||||
top: 90px;
|
||||
animation: moveHand 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hands .finger {
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
background: #1abc9c;
|
||||
border-radius: 50%/80% 40% 40% 40%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.hands .finger::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
opacity: 0.6;
|
||||
width: 8.88889px;
|
||||
height: 8.88889px;
|
||||
position: relative;
|
||||
top: 18px;
|
||||
left: 2px;
|
||||
border-radius: 50% 50% 0 0;
|
||||
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.44);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hands .finger.thumb {
|
||||
transform: rotateZ(90deg);
|
||||
left: -15px;
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.hands .finger.index {
|
||||
transform: rotateZ(20deg);
|
||||
top: 20px;
|
||||
left: -6px;
|
||||
}
|
||||
|
||||
.hands .finger.middle {
|
||||
top: 25px;
|
||||
left: 22px;
|
||||
}
|
||||
|
||||
.hands .finger.ring {
|
||||
transform: rotateZ(-10deg) scale(0.9);
|
||||
top: 20px;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.hands .finger.pinky {
|
||||
transform: rotateZ(-50deg) scale(0.8);
|
||||
top: 8px;
|
||||
left: 68px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ground__hole {
|
||||
width: 225px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.39);
|
||||
box-shadow: 0 11px 34px 20px rgba(0, 0, 0, 0.25);
|
||||
position: relative;
|
||||
top: -42px;
|
||||
}
|
||||
|
||||
.ground__rocks {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ground__rocks .rock {
|
||||
background: #3e5871;
|
||||
border-radius: 40%/80% 20% 70% 20%;
|
||||
box-shadow: 3px 4px 0 5px #1a252f;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ground__rocks:nth-child(2) {
|
||||
left: -25px;
|
||||
top: -25px;
|
||||
transform: scale(1.2) rotateZ(-10deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.ground__rocks:nth-child(3) {
|
||||
left: -3px;
|
||||
top: -53px;
|
||||
transform: scale(0.4);
|
||||
}
|
||||
|
||||
.ground__rocks:nth-child(4) {
|
||||
left: 30px;
|
||||
top: -20px;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
.ground__rocks:nth-child(5) {
|
||||
left: 55px;
|
||||
top: -15px;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.ground__rocks:nth-child(6) {
|
||||
left: 55px;
|
||||
top: -15px;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.ground__rocks:nth-child(7) {
|
||||
left: 95px;
|
||||
top: -15px;
|
||||
transform: scale(0.6) rotateY(180deg);
|
||||
}
|
||||
|
||||
.ground__rocks:nth-child(8) {
|
||||
left: 85px;
|
||||
top: 20px;
|
||||
transform: scale(0.4) rotateY(180deg);
|
||||
}
|
||||
|
||||
.ground__rocks:nth-child(9) {
|
||||
left: 165px;
|
||||
top: 10px;
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
.ground__rocks:nth-child(10) {
|
||||
left: 125px;
|
||||
top: -15px;
|
||||
transform: scale(1.1) rotateY(180deg);
|
||||
}
|
||||
|
||||
.ground__rocks:nth-child(11) {
|
||||
left: 165px;
|
||||
top: -12px;
|
||||
transform: scale(0.8) rotateY(180deg) rotateZ(-20deg);
|
||||
}
|
||||
|
||||
.ground__rocks:nth-child(12) {
|
||||
left: 265px;
|
||||
top: -90px;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.ground__rocks:nth-child(13) {
|
||||
left: 300px;
|
||||
top: -90px;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.ground__rocks:nth-child(14) {
|
||||
left: 350px;
|
||||
top: -90px;
|
||||
transform: scale(0.5) rotateY(180deg);
|
||||
}
|
||||
|
||||
.ground__rocks:nth-child(15) {
|
||||
left: 390px;
|
||||
top: -90px;
|
||||
transform: scale(0.8) rotateY(180deg) rotateZ(-10deg);
|
||||
}
|
||||
|
||||
.tomb {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #95a5a6;
|
||||
border-radius: 50% 50% 0 0;
|
||||
box-shadow: 18px 1px 0 0px #6d8082, 12px 26px 39px 7px rgba(0, 0, 0, 0.25);
|
||||
position: absolute;
|
||||
top: -280px;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.tomb .tomb__info {
|
||||
text-align: center;
|
||||
margin: 20px;
|
||||
color: #3e4a4a;
|
||||
}
|
||||
|
||||
.tomb .tomb__info .headers {
|
||||
font-weight: normal;
|
||||
line-height: 1.3em;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.brains-comic-box {
|
||||
font-size: 1.4em;
|
||||
letter-spacing: 0.2em;
|
||||
color: #e05887;
|
||||
position: absolute;
|
||||
top: -360px;
|
||||
left: -200px;
|
||||
transform: rotateZ(-10deg);
|
||||
position: relative;
|
||||
animation: moveBrainsBox 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.brains-comic-box .brains__text {
|
||||
background: #fff;
|
||||
border-radius: 40px;
|
||||
padding: 15px 20px;
|
||||
animation: moveBrainsText 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.brains-comic-box .brains__text::before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-top: 1em solid #fff;
|
||||
border-left: 0.5em solid transparent;
|
||||
border-right: 0.5em solid transparent;
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
left: 160px;
|
||||
transform: rotateZ(-30deg);
|
||||
}
|
||||
|
||||
@keyframes moveLeftArm {
|
||||
0%,
|
||||
50%,
|
||||
90%,
|
||||
100% {
|
||||
transform: rotateZ(22deg);
|
||||
}
|
||||
10%,
|
||||
20%,
|
||||
40% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveHead {
|
||||
0%,
|
||||
50%,
|
||||
90%,
|
||||
100% {
|
||||
transform: rotateZ(-10deg);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(6px) translateY(2px);
|
||||
}
|
||||
35% {
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
10%,
|
||||
20%,
|
||||
40% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveMouth {
|
||||
0%,
|
||||
50%,
|
||||
90%,
|
||||
100% {
|
||||
height: 20px;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
10%,
|
||||
20%,
|
||||
40% {
|
||||
height: 40px;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveEyebrow {
|
||||
0%,
|
||||
50%,
|
||||
90%,
|
||||
100% {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
10%,
|
||||
20%,
|
||||
40% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveHand {
|
||||
0%,
|
||||
50%,
|
||||
90%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
10%,
|
||||
20%,
|
||||
40% {
|
||||
transform: translateY(-10px) rotateZ(15deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveBrainsText {
|
||||
0%,
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80%,
|
||||
100% {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveBrainsBox {
|
||||
0%,
|
||||
50%,
|
||||
90%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
10%,
|
||||
20%,
|
||||
40% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
357
src/components/favorite.vue
Normal file
357
src/components/favorite.vue
Normal file
@ -0,0 +1,357 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="favorite-container">
|
||||
<!-- 封面 -->
|
||||
<div class="favorite-header my-animation-slide-top">
|
||||
<!-- 背景图片 -->
|
||||
<video class="index-video" autoplay="autoplay" muted="muted" loop="loop"
|
||||
:src="$store.state.sysConfig['webStaticResourcePrefix'] + 'assets/backgroundVideo.mp4'">
|
||||
</video>
|
||||
<div style="position: absolute;left: 0;top: 0;padding: 5px 20px">
|
||||
<!-- 标题 -->
|
||||
<div style="color: var(--white);margin: 0 10px">
|
||||
<div style="font-size: 30px;font-weight: bold;line-height: 2">
|
||||
百宝箱
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<!-- 友人帐 -->
|
||||
<div @click="changeFavorite(3)"
|
||||
class="card-item">
|
||||
<div class="favorite-image"></div>
|
||||
<div style="position: absolute;left: 0;top: 0;padding: 20px 25px 15px">
|
||||
<div class="card-name">
|
||||
友人帐
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
留下你的网站吧
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 曲乐 -->
|
||||
<div @click="changeFavorite(2)"
|
||||
class="card-item">
|
||||
<div class="favorite-image"></div>
|
||||
<div style="position: absolute;left: 0;top: 0;padding: 20px 25px 15px">
|
||||
<div class="card-name">
|
||||
曲乐
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
一曲肝肠断，天涯何处觅知音
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 收藏夹 -->
|
||||
<div @click="changeFavorite(1)"
|
||||
class="card-item">
|
||||
<div class="favorite-image"></div>
|
||||
<div style="position: absolute;left: 0;top: 0;padding: 20px 25px 15px">
|
||||
<div class="card-name">
|
||||
收藏夹
|
||||
</div>
|
||||
<div class="card-desc">
|
||||
将本网站添加到您的收藏夹吧
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div class="favorite-content">
|
||||
<!-- 收藏夹 -->
|
||||
<div v-show="card === 1 && !$common.isEmpty(collects)" class="my-animation-hideToShow">
|
||||
<div v-for="(value, key) in collects" :key="key" style="margin-top: 20px">
|
||||
<div class="collect-classify">
|
||||
{{key}}
|
||||
</div>
|
||||
<div class="favorite-item-wrap">
|
||||
<div v-for="(item, index) in value" :key="index" @click="toUrl(item.url)" class="favorite-item">
|
||||
<div>
|
||||
<el-avatar class="favorite-item-image" :size="60"
|
||||
:src="item.cover">
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div style="width: calc(100% - 80px)">
|
||||
<div class="favorite-item-title">
|
||||
{{item.title}}
|
||||
</div>
|
||||
<div class="favorite-item-introduction">
|
||||
{{item.introduction}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 曲乐 -->
|
||||
<div v-show="card === 2" class="my-animation-hideToShow">
|
||||
<funny></funny>
|
||||
</div>
|
||||
|
||||
<!-- 友人帐 -->
|
||||
<div v-show="card === 3" class="my-animation-hideToShow">
|
||||
<friend></friend>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<div style="background: var(--favoriteBg)">
|
||||
<myFooter></myFooter>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const myFooter = () => import( "./common/myFooter");
|
||||
const funny = () => import( "./funny");
|
||||
const friend = () => import( "./friend");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
myFooter,
|
||||
funny,
|
||||
friend
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
card: null,
|
||||
collects: {}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.card = 3;
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
toUrl(url) {
|
||||
window.open(url);
|
||||
},
|
||||
changeFavorite(card) {
|
||||
if (card === 1) {
|
||||
if (this.$common.isEmpty(this.collects)) {
|
||||
this.getCollect(card);
|
||||
}
|
||||
}
|
||||
this.card = card;
|
||||
},
|
||||
getCollect() {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/listCollect")
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.collects = res.data;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.favorite-container {
|
||||
padding: 25px;
|
||||
background: var(--favoriteBg);
|
||||
}
|
||||
|
||||
.favorite-header {
|
||||
margin: 60px auto 30px;
|
||||
height: 330px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.index-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.favorite-image::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--translucent);
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 120px;
|
||||
border-radius: 20px;
|
||||
animation: hideToShow 1s ease-in-out;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
margin: 10px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.card-item:hover {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.card-name:after {
|
||||
top: 50px;
|
||||
width: 22px;
|
||||
left: 26px;
|
||||
height: 2px;
|
||||
background: var(--white);
|
||||
content: "";
|
||||
border-radius: 1px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-weight: bold;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.favorite-content {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.collect-classify {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.favorite-item-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.favorite-item {
|
||||
transition: all 0.3s;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 16px -4px #2c2d300c;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
width: calc(100% / 4 - 20px);
|
||||
max-width: 320px;
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.favorite-item:hover {
|
||||
background: #425AEF;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.favorite-item:hover .favorite-item-image {
|
||||
transition: all 0.6s;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
opacity: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.favorite-item:hover div:nth-child(2) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.favorite-item-image {
|
||||
margin-right: 20px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.favorite-item-title {
|
||||
font-size: 19px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.favorite-item-introduction {
|
||||
opacity: 0.7;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 906px) {
|
||||
.card-container {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 906px) {
|
||||
.favorite-item {
|
||||
width: calc(100% / 3 - 20px);
|
||||
}
|
||||
|
||||
.favorite-header {
|
||||
height: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 636px) {
|
||||
.favorite-item {
|
||||
width: calc(100% / 2 - 20px);
|
||||
}
|
||||
|
||||
.favorite-header {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.favorite-container {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.favorite-item {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
372
src/components/friend.vue
Normal file
372
src/components/friend.vue
Normal file
@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="friend-wrap">
|
||||
<div class="friend-main">
|
||||
<!-- 添加友链 -->
|
||||
<div @click="clickLetter()" class="form-wrap">
|
||||
<!-- 信封上面 -->
|
||||
<img class="before-img" :src="$store.state.sysConfig['webStaticResourcePrefix'] + 'assets/friendLetterTop.png'" style="width: 100%"/>
|
||||
<!-- 信 -->
|
||||
<div class="envelope" style="animation: hideToShow 2s">
|
||||
<div class="form-main">
|
||||
<img :src="$store.state.sysConfig['webStaticResourcePrefix'] + 'assets/friendLetterMiddle.jpg'" style="width: 100%"/>
|
||||
<div>
|
||||
<h3 style="text-align: center">有朋自远方来</h3>
|
||||
<div>
|
||||
<div class="myCenter form-friend">
|
||||
<div class="user-title">
|
||||
<div>名称：</div>
|
||||
<div>简介：</div>
|
||||
<div>封面：</div>
|
||||
<div>网址：</div>
|
||||
</div>
|
||||
<div class="user-content">
|
||||
<div>
|
||||
<el-input maxlength="30" v-model="friend.title"></el-input>
|
||||
</div>
|
||||
<div>
|
||||
<el-input maxlength="120" v-model="friend.introduction"></el-input>
|
||||
</div>
|
||||
<div>
|
||||
<el-input maxlength="200" v-model="friend.cover"></el-input>
|
||||
</div>
|
||||
<div>
|
||||
<el-input maxlength="200" v-model="friend.url"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="myCenter" style="margin-top: 20px">
|
||||
<proButton :info="'提交'"
|
||||
@click.native.stop="submitFriend()"
|
||||
:before="$constant.before_color_2"
|
||||
:after="$constant.after_color_2">
|
||||
</proButton>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img :src="$store.state.sysConfig['webStaticResourcePrefix'] + 'assets/friendLetterBiLi.png'" style="width: 100%;margin: 5px auto"/>
|
||||
</div>
|
||||
<p style="font-size: 12px;text-align: center;color: #999">欢迎交换友链</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img class="after-img" :src="$store.state.sysConfig['webStaticResourcePrefix'] + 'assets/friendLetterBottom.png'" style="width: 100%"/>
|
||||
</div>
|
||||
|
||||
<div style="font-size: 20px;font-weight: bold;margin-top: 40px">🌸本站信息</div>
|
||||
<div>
|
||||
<blockquote>
|
||||
<div>网站名称: {{$store.state.sysConfig['friendWebName']}}</div>
|
||||
<div>网址: {{$store.state.sysConfig['friendUrl']}}</div>
|
||||
<div>头像: {{$store.state.sysConfig['friendAvatar']}}</div>
|
||||
<div>描述: {{$store.state.sysConfig['friendIntroduction']}}</div>
|
||||
<div>网站封面: {{$store.state.sysConfig['friendCover']}}</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div style="font-size: 20px;font-weight: bold">🌸申请方式</div>
|
||||
<div>
|
||||
<blockquote>
|
||||
<div>点击上方信封✨✨✨</div>
|
||||
<div>不会添加带有广告营销和没有实质性内容的友链🚫🚫🚫</div>
|
||||
<div>申请之前请将本网站添加为您的友链哦🎟️🎟️🎟️</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<template v-if="friendList.hasOwnProperty('♥️青出于蓝')">
|
||||
<hr>
|
||||
|
||||
<h2 style="margin-top: 60px">♥️青出于蓝</h2>
|
||||
<card :resourcePathList="friendList['♥️青出于蓝']" @clickResourcePath="clickFriend"></card>
|
||||
</template>
|
||||
|
||||
<template v-if="friendList.hasOwnProperty('🥇友情链接')">
|
||||
<hr>
|
||||
|
||||
<h2 style="margin-top: 60px">🥇友情链接</h2>
|
||||
<card :resourcePathList="friendList['🥇友情链接']" @clickResourcePath="clickFriend"></card>
|
||||
</template>
|
||||
|
||||
<template v-for="(value, key, index) in friendList">
|
||||
<template v-if="key !== '♥️青出于蓝' && key !== '🥇友情链接'">
|
||||
<hr :key="index">
|
||||
|
||||
<h2 style="margin-top: 60px" :key="index">{{ key }}</h2>
|
||||
<card :resourcePathList="value" @clickResourcePath="clickFriend" :key="index"></card>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const card = () => import( "./common/card");
|
||||
const proButton = () => import( "./common/proButton");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
card,
|
||||
proButton
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
friendList: {},
|
||||
friend: {
|
||||
title: "",
|
||||
introduction: "",
|
||||
cover: "",
|
||||
url: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getFriends();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
clickLetter() {
|
||||
if (document.body.clientWidth < 700) {
|
||||
$(".form-wrap").css({"height": "1000px", "top": "-200px"});
|
||||
} else {
|
||||
$(".form-wrap").css({"height": "1150px", "top": "-200px"});
|
||||
}
|
||||
},
|
||||
submitFriend() {
|
||||
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||
this.$message({
|
||||
message: "请先登录！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.friend.title.trim() === "") {
|
||||
this.$message({
|
||||
message: "你还没写名称呢~",
|
||||
type: "warning"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.friend.introduction.trim() === "") {
|
||||
this.$message({
|
||||
message: "你还没写简介呢~",
|
||||
type: "warning"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.friend.cover.trim() === "") {
|
||||
this.$message({
|
||||
message: "你还没设置封面呢~",
|
||||
type: "warning"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.friend.url.trim() === "") {
|
||||
this.$message({
|
||||
message: "你还没写网址呢~",
|
||||
type: "warning"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.$http.post(this.$constant.baseURL + "/webInfo/saveFriend", this.friend)
|
||||
.then((res) => {
|
||||
$(".form-wrap").css({"height": "447px", "top": "0"});
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '提交成功，待管理员审核！'
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
clickFriend(path) {
|
||||
window.open(path);
|
||||
},
|
||||
getFriends() {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/listFriend")
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.friendList = res.data;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.friend-main {
|
||||
max-width: 1200px;
|
||||
margin: 40px auto;
|
||||
border-radius: 10px;
|
||||
padding: 40px;
|
||||
background: rgba(255, 255, 255, .85);
|
||||
}
|
||||
|
||||
.friend-main h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
hr {
|
||||
position: relative;
|
||||
margin: 40px auto;
|
||||
border: 2px dashed var(--lightGreen);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
hr:before {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
left: 5%;
|
||||
color: var(--lightGreen);
|
||||
content: '❄';
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
|
||||
hr:hover:before {
|
||||
left: calc(95% - 20px);
|
||||
}
|
||||
|
||||
.form-wrap {
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
width: 530px;
|
||||
height: 447px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
transition: all 1s ease-in-out .3s;
|
||||
z-index: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.before-img {
|
||||
position: absolute;
|
||||
bottom: 126px;
|
||||
left: 0;
|
||||
background-repeat: no-repeat;
|
||||
width: 530px;
|
||||
height: 317px;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
.after-img {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
background-repeat: no-repeat;
|
||||
width: 530px;
|
||||
height: 259px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.friend-wrap {
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.envelope {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
transition: all 1s ease-in-out .3s;
|
||||
padding: 200px 20px 20px;
|
||||
}
|
||||
|
||||
.form-main {
|
||||
background: var(--white);
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.user-title {
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.user-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.user-title div {
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user-content > div {
|
||||
height: 55px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-content >>> .el-input__inner {
|
||||
border: none;
|
||||
height: 35px;
|
||||
background: var(--whiteMask);
|
||||
}
|
||||
|
||||
.form-friend {
|
||||
margin-top: 12px;
|
||||
background-color: #eee;
|
||||
border: #ddd 1px solid;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
line-height: 2;
|
||||
border-left: 0.2rem solid #ed6ea0;
|
||||
padding: 10px 1rem;
|
||||
background-color: #ffe6fa;
|
||||
border-radius: 4px;
|
||||
margin: 20px auto;
|
||||
color: var(--maxGreyFont);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.form-wrap {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.before-img {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.after-img {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.friend-main {
|
||||
padding: 40px 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
289
src/components/funny.vue
Normal file
289
src/components/funny.vue
Normal file
@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div class="funny-wrap" v-if="!$common.isEmpty(funnys)">
|
||||
<div v-for="(item, index) in funnys" :key="index">
|
||||
<div style="display: flex">
|
||||
<span class="iconRotate">
|
||||
<svg viewBox="0 0 1024 1024" width="28" height="28">
|
||||
<path
|
||||
d="M502.272 948.224l-427.008-427.008c-1.536-1.536-1.536-3.584 0-4.608l427.008-427.008c1.536-1.536 3.584-1.536 4.608 0l427.008 427.008c1.536 1.536 1.536 3.584 0 4.608L506.88 948.224c-1.536 1.024-3.584 1.024-4.608 0z"
|
||||
fill="#C9E6FF"></path>
|
||||
<path
|
||||
d="M504.32 956.416c-2.56 0-5.632-1.024-7.68-3.072l-427.008-427.008c-4.096-4.096-4.096-11.264 0-15.36L496.64 83.456c4.096-4.096 11.264-4.096 15.36 0l427.008 427.008c4.096 4.096 4.096 11.264 0 15.36L512 953.344c-2.048 2.048-4.608 3.072-7.68 3.072z m-420.864-437.76l420.864 420.864 420.864-420.864L504.32 97.28l-420.864 421.376z"
|
||||
fill="#2E66FF"></path>
|
||||
<path
|
||||
d="M497.152 97.792l13.312 414.208 395.264-395.264c5.632-5.632 2.048-15.872-6.144-16.384L506.88 88.064c-5.632-0.512-9.728 4.096-9.728 9.728z"
|
||||
fill="#FFFFFF"></path>
|
||||
<path
|
||||
d="M503.296 529.92l-13.824-432.128c0-4.608 1.536-9.216 5.12-12.8s7.68-5.12 12.8-5.12l392.704 12.8c7.168 0 12.8 4.608 15.36 10.752 2.56 6.656 1.024 13.312-3.584 18.432l-408.576 408.064z m1.536-432.64l12.8 396.8 382.464-382.464c0.512-0.512 0.512-1.024 0.512-2.048-0.512-0.512-1.024-1.024-1.536-1.024l-392.704-12.8c-0.512 0-1.024 0.512-1.536 0.512v1.024z"
|
||||
fill="#2E66FF"></path>
|
||||
<path
|
||||
d="M522.24 946.688L508.416 532.48l-395.264 395.264c-5.632 5.632-2.048 15.872 6.144 16.384l392.704 12.8c5.632 0 10.24-4.608 10.24-10.24z"
|
||||
fill="#FFFFFF"></path>
|
||||
<path
|
||||
d="M512.512 964.096h-0.512l-392.704-12.8c-7.168 0-12.8-4.608-15.36-10.752-2.56-6.656-1.024-13.312 3.584-18.432l407.552-407.552 13.824 432.128c0 4.608-1.536 9.216-5.12 12.8-2.048 3.072-6.656 4.608-11.264 4.608z m-11.264-413.696l-382.464 382.464c-0.512 0.512-0.512 1.024-0.512 2.048 0.512 0.512 1.024 1.024 1.536 1.024l392.704 12.8c0.512 0 1.024-0.512 1.536-0.512 0 0 0.512-0.512 0.512-1.536l-13.312-396.288z"
|
||||
fill="#2E66FF"></path>
|
||||
<path
|
||||
d="M931.84 509.952l-414.208 13.312 395.264 395.264c5.632 5.632 15.872 2.048 16.384-6.144l12.8-392.704c0-5.632-4.608-10.24-10.24-9.728z"
|
||||
fill="#FFB5EC"></path>
|
||||
<path
|
||||
d="M919.552 929.28c-4.608 0-8.704-1.536-11.776-5.12l-407.552-407.552 432.128-13.824c4.608 0 9.216 1.536 12.8 5.12s5.12 8.192 5.12 12.8l-12.8 392.704c0 7.168-4.608 12.8-10.752 15.36-3.072 0-5.12 0.512-7.168 0.512z m-384-398.848l382.464 382.464c0.512 0.512 1.024 0.512 2.048 0.512 0.512-0.512 1.024-1.024 1.024-1.536l12.8-392.704c0-0.512-0.512-1.024-0.512-1.536 0 0-1.024-0.512-1.536-0.512l-396.288 13.312z"
|
||||
fill="#2E66FF"></path>
|
||||
<path
|
||||
d="M76.8 526.848l414.208-13.312-394.752-395.264c-5.632-5.632-15.872-2.048-16.384 6.144L67.072 517.12c0 5.632 4.096 10.24 9.728 9.728z"
|
||||
fill="#FFF152"></path>
|
||||
<path
|
||||
d="M76.8 534.528c-4.608 0-8.704-2.048-12.288-5.12-3.584-3.584-5.12-8.192-5.12-12.8l12.8-392.704c0-7.168 4.608-12.8 10.752-15.36 6.656-2.56 13.312-1.024 18.432 3.584l407.552 407.552-432.128 13.824v1.024z m12.8-411.136h-0.512c-0.512 0.512-1.024 1.024-1.024 1.536l-12.8 392.704c0 0.512 0.512 1.024 0.512 1.536 0 0 0.512 0.512 1.536 0.512L474.112 506.88 90.624 123.904c-0.512-0.512-1.024-0.512-1.024-0.512z"
|
||||
fill="#2E66FF"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="funny-title">{{index + 1}}号选手：{{item.classify}}</span>
|
||||
</div>
|
||||
<div class="process-wrap">
|
||||
<el-collapse v-model="activeName" accordion @change="changeFunny(item.classify)">
|
||||
<el-collapse-item :title="item.classify.includes('音乐') ? '音乐无国界' : '笑梗不笑人'" :name="index">
|
||||
<div class="my-animation-slide-bottom"
|
||||
style="display: flex;flex-flow: wrap;margin-left: 20px"
|
||||
v-if="!$common.isEmpty(item.data)">
|
||||
<div style="width: 150px" v-for="(funny, i) in item.data" :key="i">
|
||||
<el-avatar class="funny-avatar myCenter" :size="110"
|
||||
style="margin: 20px"
|
||||
@click.native="playSound(funny.url, item.data, i)"
|
||||
:src="funny.cover">
|
||||
</el-avatar>
|
||||
<div class="funny-item-title">{{funny.title}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
|
||||
data() {
|
||||
return {
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 9999,
|
||||
order: "title",
|
||||
desc: false,
|
||||
resourceType: "funny",
|
||||
classify: ""
|
||||
},
|
||||
activeName: 0,
|
||||
audio: null,
|
||||
playList: null,
|
||||
index: null,
|
||||
funnys: [{
|
||||
classify: "",
|
||||
count: null,
|
||||
data: [{
|
||||
classify: "",
|
||||
cover: "",
|
||||
url: "",
|
||||
title: ""
|
||||
}]
|
||||
}],
|
||||
funny: {
|
||||
classify: "",
|
||||
title: "",
|
||||
cover: "",
|
||||
url: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getFunny();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.audio != null && !this.audio.paused) {
|
||||
this.audio.pause();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getFunny() {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/listFunny")
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.funnys = res.data;
|
||||
this.changeFunny(this.funnys[0].classify);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
listFunny() {
|
||||
this.$http.post(this.$constant.baseURL + "/webInfo/listResourcePath", this.pagination)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data) && !this.$common.isEmpty(res.data.records)) {
|
||||
this.funnys.forEach(funny => {
|
||||
if (funny.classify === this.pagination.classify) {
|
||||
funny.data = res.data.records;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
});
|
||||
}
|
||||
this.pagination.classify = "";
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
changeFunny(classify) {
|
||||
this.funnys.forEach(funny => {
|
||||
if (funny.classify === classify && this.$common.isEmpty(funny.data)) {
|
||||
this.pagination.classify = classify;
|
||||
this.listFunny();
|
||||
}
|
||||
});
|
||||
},
|
||||
playSound(src, playList, index) {
|
||||
this.playList = playList;
|
||||
this.index = index;
|
||||
if (this.audio != null) {
|
||||
if (this.audio.src === src) {
|
||||
if (this.audio.paused) {
|
||||
this.audio.play();
|
||||
} else {
|
||||
this.audio.pause();
|
||||
}
|
||||
} else {
|
||||
this.audio.pause();
|
||||
this.audio.src = src;
|
||||
this.audio.load();
|
||||
this.audio.play();
|
||||
}
|
||||
} else {
|
||||
this.audio = new Audio(src);
|
||||
this.audio.play();
|
||||
this.audio.onended = () => {
|
||||
this.index = this.index + 1;
|
||||
if (this.index < this.playList.length) {
|
||||
this.audio.src = this.playList[this.index].url;
|
||||
this.audio.load();
|
||||
setTimeout(() => {
|
||||
this.audio.play();
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.funny-wrap {
|
||||
border-radius: 10px;
|
||||
max-width: 1600px;
|
||||
padding: 40px 0 80px;
|
||||
}
|
||||
|
||||
.funny-title {
|
||||
color: var(--black);
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.process-wrap {
|
||||
margin: 20px 0 40px;
|
||||
}
|
||||
|
||||
.process-wrap hr {
|
||||
position: relative;
|
||||
margin: 30px auto 100px;
|
||||
border: 2px dashed var(--lightGreen);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.process-wrap hr:before {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
left: 5%;
|
||||
color: var(--lightGreen);
|
||||
content: '❄';
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
|
||||
.process-wrap hr:hover:before {
|
||||
left: calc(95% - 20px);
|
||||
}
|
||||
|
||||
.process-wrap >>> .el-collapse-item__header {
|
||||
border-bottom: unset;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
background-color: var(--maxMaxLightGray);
|
||||
color: var(--lightGreen);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.process-wrap >>> .el-collapse-item__wrap {
|
||||
background-color: var(--maxMaxLightGray);
|
||||
}
|
||||
|
||||
.process-wrap .el-collapse {
|
||||
border-top: unset;
|
||||
border-bottom: unset;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.process-wrap >>> .el-collapse-item__wrap {
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
||||
.funny-item-title {
|
||||
text-align: center;
|
||||
margin: 0 10px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.funny-item-title:hover {
|
||||
text-overflow: unset;
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.funny-avatar {
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.funny-avatar:hover {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
</style>
|
||||
738
src/components/home.vue
Normal file
738
src/components/home.vue
Normal file
@ -0,0 +1,738 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- el过渡动画 -->
|
||||
<transition name="el-fade-in-linear">
|
||||
<!-- 导航栏 -->
|
||||
<div v-show="toolbar.visible || ($common.mobile() || mobile)"
|
||||
@mouseenter="hoverEnter = true"
|
||||
@mouseleave="hoverEnter = false"
|
||||
:class="[{ enter: toolbar.enter }, { hoverEnter: (hoverEnter || this.$route.path === '/favorite' || this.$route.path === '/travel') && !toolbar.enter }]"
|
||||
class="toolbar-content myBetween">
|
||||
<!-- 网站名称 -->
|
||||
<div class="toolbar-title">
|
||||
<h2 @click="$router.push({path: '/'})">{{$store.state.webInfo.webName}}</h2>
|
||||
</div>
|
||||
|
||||
<!-- 手机导航按钮 -->
|
||||
<div v-if="$common.mobile() || mobile"
|
||||
class="toolbar-mobile-menu"
|
||||
@click="toolbarDrawer = !toolbarDrawer"
|
||||
:class="{ enter: toolbar.enter }">
|
||||
<i class="el-icon-s-operation"></i>
|
||||
</div>
|
||||
|
||||
<!-- 导航列表 -->
|
||||
<div v-else>
|
||||
<ul class="scroll-menu">
|
||||
<li @click="$router.push({path: '/'})" v-if="$store.state.sysConfig['bar.menu.show'].includes('首页')">
|
||||
<div class="my-menu">
|
||||
🏡 <span>首页</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<el-dropdown :hide-timeout="500" placement="bottom" v-if="$store.state.sysConfig['bar.menu.show'].includes('记录')">
|
||||
<li>
|
||||
<div class="my-menu">
|
||||
📒 <span>记录</span>
|
||||
</div>
|
||||
</li>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="(sort, index) in sortInfo" :key="index">
|
||||
<div @click="$router.push({path: '/sort', query: {sortId: sort.id}})">
|
||||
{{sort.sortName}}
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<!-- 家 -->
|
||||
<li @click="$router.push({path: '/love'})" v-if="$store.state.sysConfig['bar.menu.show'].includes('家')">
|
||||
<div class="my-menu">
|
||||
❤️🔥 <span>家</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 随笔 -->
|
||||
<li @click="$router.push({path: '/jotting'})" v-if="$store.state.sysConfig['bar.menu.show'].includes('随笔')">
|
||||
<div class="my-menu">
|
||||
🏖️ <span>随笔</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 旅拍 -->
|
||||
<li @click="$router.push({path: '/travel'})" v-if="$store.state.sysConfig['bar.menu.show'].includes('旅拍')">
|
||||
<div class="my-menu">
|
||||
📸 <span>旅拍</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 百宝箱 -->
|
||||
<li @click="$router.push({path: '/favorite'})" v-if="$store.state.sysConfig['bar.menu.show'].includes('百宝箱')">
|
||||
<div class="my-menu">
|
||||
🧰 <span>百宝箱</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 留言 -->
|
||||
<li @click="$router.push({path: '/message'})" v-if="$store.state.sysConfig['bar.menu.show'].includes('留言')">
|
||||
<div class="my-menu">
|
||||
📪 <span>留言</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 聊天室 -->
|
||||
<li @click="goIm()" v-if="$store.state.sysConfig['bar.menu.show'].includes('联系我')">
|
||||
<div class="my-menu">
|
||||
💬 <span>联系我</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 后台 -->
|
||||
<li @click="goAdmin()" v-if="$store.state.sysConfig['bar.menu.show'].includes('后台')">
|
||||
<div class="my-menu">
|
||||
💻️ <span>后台</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 个人中心 -->
|
||||
<li>
|
||||
<el-dropdown placement="bottom">
|
||||
<el-avatar class="user-avatar" :size="36"
|
||||
style="margin-top: 12px"
|
||||
:src="!$common.isEmpty($store.state.currentUser)?$store.state.currentUser.avatar:$store.state.webInfo.avatar">
|
||||
</el-avatar>
|
||||
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="$router.push({path: '/user'})"
|
||||
v-if="!$common.isEmpty($store.state.currentUser)">
|
||||
<i class="fa fa-user-circle" aria-hidden="true"></i> <span>个人中心</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="logout()" v-if="!$common.isEmpty($store.state.currentUser)">
|
||||
<i class="fa fa-sign-out" aria-hidden="true"></i> <span>退出</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="$router.push({path: '/user'})"
|
||||
v-if="$common.isEmpty($store.state.currentUser)">
|
||||
<i class="fa fa-sign-in" aria-hidden="true"></i> <span>登陆</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<div id="main-container">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
|
||||
<!-- 回到顶部按钮 -->
|
||||
<!-- <div href="#" class="cd-top" v-if="!$common.mobile()" @click="toTop()"></div>-->
|
||||
|
||||
<div class="toolButton">
|
||||
<div id="toc-button" @click="clickTocButton()" v-if="hasToc">
|
||||
<i class="fa fa-align-justify" aria-hidden="true"></i>
|
||||
</div>
|
||||
|
||||
<div class="backTop" v-if="toolButton" @click="toTop()">
|
||||
<!-- 回到顶部按钮 -->
|
||||
<svg viewBox="0 0 1024 1024" width="50" height="50">
|
||||
<path
|
||||
d="M696.741825 447.714002c2.717387-214.485615-173.757803-312.227566-187.33574-320.371729-10.857551 5.430775-190.050127 103.168727-187.33274 320.371729-35.297037 24.435488-73.306463 65.1623-67.875688 135.752376 5.430775 70.589076 76.018851 119.460051 103.168726 116.745664 27.152875-2.716387 19.004713-21.7221 19.004713-21.7221l8.148162-38.011425s40.721814 59.732525 51.583363 59.732525h146.609927c13.574938 0 51.585363-59.732525 51.585363-59.732525l8.147162 38.011425s-8.147162 19.005713 19.004713 21.7221c27.148876 2.714388 97.738951-46.156588 103.168727-116.745664s-32.57965-111.316888-67.876688-135.752376z m-187.33574-2.713388c-5.426776 0-70.589076-2.717387-78.733239-78.737238 2.713388-73.306463 73.306463-78.733239 78.733239-81.450626 5.430775 0 76.02385 8.144163 78.736238 81.450626-8.143163 76.019851-73.305463 78.737238-78.736238 78.737238z m0 0"
|
||||
fill="#000000"></path>
|
||||
<path
|
||||
d="M423.602441 746.060699c6.47054-6.297579 12.823107-7.017417 21.629121-2.784372 34.520213 16.582259 70.232157 19.645568 107.031855 9.116944 8.118169-2.323476 15.974396-5.475765 23.598677-9.22392 13.712907-6.73648 26.003134 0.8878 26.080116 16.13936 0.109975 22.574907-0.024994 45.142816 0.080982 67.709725 0.031993 7.464316-2.277486 13.322995-9.44387 16.608254-7.277358 3.333248-13.765895 1.961558-19.526595-3.264264-3.653176-3.313253-7.063407-6.897444-10.634601-10.304675-6.563519-6.259588-6.676494-6.25259-10.625603 1.603638-8.437097 16.80121-16.821205 33.623415-25.257302 50.423625-2.489438 4.953882-5.706713 9.196925-11.411426 10.775569-8.355115 2.315478-15.772442-1.070758-20.272427-9.867774-8.774021-17.15313-17.269104-34.453228-25.918153-51.669344-3.750154-7.469315-3.9891-7.479313-10.141712-1.514658-3.715162 3.602187-7.31435 7.326347-11.142486 10.800563-5.571743 5.060858-11.934308 6.269586-18.936728 3.207277-6.82746-2.984327-9.869774-8.483086-9.892769-15.685462-0.070984-23.506697-0.041991-47.018393-0.020995-70.532089 0.007998-4.679944 1.46467-8.785018 4.803916-11.538397z"
|
||||
fill="#000000"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<el-popover placement="left"
|
||||
:close-delay="500"
|
||||
trigger="hover">
|
||||
<div slot="reference">
|
||||
<i class="fa fa-cog iconRotate" style="color: var(--black)" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="my-setting">
|
||||
<div>
|
||||
<!-- 太阳按钮 -->
|
||||
<i v-if="isDark" class="el-icon-sunny iconRotate" @click="changeColor()"></i>
|
||||
<!-- 月亮按钮 -->
|
||||
<i v-else class="fa fa-moon-o" aria-hidden="true" @click="changeColor()"></i>
|
||||
</div>
|
||||
<div>
|
||||
<i class="fa fa-snowflake-o" aria-hidden="true" @click="changeMouseAnimation()"></i>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
<!-- 点击动画 -->
|
||||
<canvas v-if="mouseAnimation" id="mousedown"
|
||||
style="position:fixed;left:0;top:0;pointer-events:none;z-index: 1000">
|
||||
</canvas>
|
||||
|
||||
<!-- 图片预览 -->
|
||||
<div id="outerImg">
|
||||
<div id="innerImg" style="position:absolute">
|
||||
<img id="bigImg" src=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-drawer :visible.sync="toolbarDrawer"
|
||||
:show-close="false"
|
||||
size="65%"
|
||||
custom-class="toolbarDrawer"
|
||||
title="欢迎光临"
|
||||
direction="ltr">
|
||||
<div>
|
||||
<ul class="small-menu">
|
||||
<li @click="smallMenu({path: '/'})" v-if="$store.state.sysConfig['bar.menu.show'].includes('首页')">
|
||||
<div>
|
||||
🏡 <span>首页</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li v-if="$store.state.sysConfig['bar.menu.show'].includes('记录')">
|
||||
<div>
|
||||
📒 <span>记录</span>
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="(menu, index) in sortInfo"
|
||||
:key="index"
|
||||
class="sortMenu"
|
||||
@click="smallMenu({path: '/sort', query: {sortId: menu.id}})">
|
||||
{{menu.sortName}}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 家 -->
|
||||
<li @click="smallMenu({path: '/love'})" v-if="$store.state.sysConfig['bar.menu.show'].includes('家')">
|
||||
<div>
|
||||
❤️🔥 <span>家</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 随笔 -->
|
||||
<li @click="smallMenu({path: '/jotting'})" v-if="$store.state.sysConfig['bar.menu.show'].includes('随笔')">
|
||||
<div>
|
||||
🏖️ <span>随笔</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 旅拍 -->
|
||||
<li @click="smallMenu({path: '/travel'})" v-if="$store.state.sysConfig['bar.menu.show'].includes('旅拍')">
|
||||
<div>
|
||||
📸 <span>旅拍</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 百宝箱 -->
|
||||
<li @click="smallMenu({path: '/favorite'})" v-if="$store.state.sysConfig['bar.menu.show'].includes('百宝箱')">
|
||||
<div>
|
||||
🧰 <span>百宝箱</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 留言 -->
|
||||
<li @click="smallMenu({path: '/message'})" v-if="$store.state.sysConfig['bar.menu.show'].includes('留言')">
|
||||
<div>
|
||||
📪 <span>留言</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 聊天室 -->
|
||||
<li @click="goIm()" v-if="$store.state.sysConfig['bar.menu.show'].includes('联系我')">
|
||||
<div>
|
||||
💬 <span>联系我</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- 后台 -->
|
||||
<li @click="goAdmin()" v-if="$store.state.sysConfig['bar.menu.show'].includes('后台')">
|
||||
<div>
|
||||
💻️ <span>后台</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<template v-if="$common.isEmpty($store.state.currentUser)">
|
||||
<li @click="smallMenu({path: '/user'})">
|
||||
<div>
|
||||
<i class="fa fa-sign-in" aria-hidden="true"></i>
|
||||
<span> 登录</span>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
<template v-else>
|
||||
<li @click="smallMenu({path: '/user'})">
|
||||
<div>
|
||||
<i class="fa fa-user-circle" aria-hidden="true"></i>
|
||||
<span> 个人中心</span>
|
||||
</div>
|
||||
</li>
|
||||
<li @click="smallMenuLogout()">
|
||||
<div>
|
||||
<i class="fa fa-sign-out" aria-hidden="true"></i>
|
||||
<span> 退出</span>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mousedown from '../utils/mousedown';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
toolButton: false,
|
||||
hoverEnter: false,
|
||||
mouseAnimation: false,
|
||||
isDark: false,
|
||||
scrollTop: 0,
|
||||
toolbarDrawer: false,
|
||||
mobile: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.mouseAnimation) {
|
||||
mousedown();
|
||||
}
|
||||
window.addEventListener("scroll", this.onScrollPage);
|
||||
if (this.isDaylight()) {
|
||||
this.isDark = true;
|
||||
let root = document.querySelector(":root");
|
||||
root.style.setProperty("--background", "#272727");
|
||||
root.style.setProperty("--fontColor", "white");
|
||||
root.style.setProperty("--borderColor", "#4F4F4F");
|
||||
root.style.setProperty("--borderHoverColor", "black");
|
||||
root.style.setProperty("--articleFontColor", "#E4E4E4");
|
||||
root.style.setProperty("--articleGreyFontColor", "#D4D4D4");
|
||||
root.style.setProperty("--commentContent", "#D4D4D4");
|
||||
root.style.setProperty("--favoriteBg", "#1e1e1e");
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener("scroll", this.onScrollPage);
|
||||
},
|
||||
watch: {
|
||||
scrollTop(scrollTop, oldScrollTop) {
|
||||
//如果滑动距离超过屏幕高度三分之一视为进入页面，背景改为白色
|
||||
let enter = scrollTop > window.innerHeight / 2;
|
||||
const top = scrollTop - oldScrollTop < 0;
|
||||
let isShow = scrollTop - window.innerHeight > 30;
|
||||
this.toolButton = isShow;
|
||||
if (isShow && !this.$common.mobile()) {
|
||||
if (window.innerHeight > 950) {
|
||||
$(".cd-top").css("top", "0");
|
||||
} else {
|
||||
$(".cd-top").css("top", window.innerHeight - 950 + "px");
|
||||
}
|
||||
} else if (!isShow && !this.$common.mobile()) {
|
||||
$(".cd-top").css("top", "-900px");
|
||||
}
|
||||
|
||||
//导航栏显示与颜色
|
||||
let toolbarStatus = {
|
||||
enter: enter,
|
||||
visible: top,
|
||||
};
|
||||
this.$store.commit("changeToolbarStatus", toolbarStatus);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
let toolbarStatus = {
|
||||
enter: false,
|
||||
visible: true,
|
||||
};
|
||||
this.$store.commit("changeToolbarStatus", toolbarStatus);
|
||||
this.getWebInfo();
|
||||
this.getSysConfig();
|
||||
this.getSortInfo();
|
||||
|
||||
this.mobile = document.body.clientWidth < 1100;
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
let docWidth = document.body.clientWidth;
|
||||
if (docWidth < 920) {
|
||||
this.mobile = true;
|
||||
} else {
|
||||
this.mobile = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
toolbar() {
|
||||
return this.$store.state.toolbar;
|
||||
},
|
||||
sortInfo() {
|
||||
return this.$store.state.sortInfo;
|
||||
},
|
||||
hasToc() {
|
||||
return this.$route.name === 'article';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
smallMenu(data) {
|
||||
this.$router.push(data)
|
||||
this.toolbarDrawer = false;
|
||||
},
|
||||
|
||||
smallMenuLogout() {
|
||||
this.logout();
|
||||
this.toolbarDrawer = false;
|
||||
},
|
||||
|
||||
goIm() {
|
||||
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||
this.$message({
|
||||
message: "请先登录！",
|
||||
type: "error"
|
||||
});
|
||||
} else {
|
||||
let userToken = this.$common.encrypt(localStorage.getItem("userToken"));
|
||||
window.open(this.$constant.imBaseURL + "?userToken=" + userToken + "&defaultStoreType=" + localStorage.getItem("defaultStoreType"));
|
||||
}
|
||||
},
|
||||
|
||||
goAdmin() {
|
||||
window.open(this.$constant.webURL + "/admin");
|
||||
},
|
||||
|
||||
logout() {
|
||||
this.$http.get(this.$constant.baseURL + "/user/logout")
|
||||
.then((res) => {
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
this.$store.commit("loadCurrentUser", {});
|
||||
localStorage.removeItem("userToken");
|
||||
this.$router.push({path: '/'});
|
||||
},
|
||||
getWebInfo() {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/getWebInfo")
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.$store.commit("loadWebInfo", res.data);
|
||||
localStorage.setItem("defaultStoreType", res.data.defaultStoreType);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
getSysConfig() {
|
||||
this.$http.get(this.$constant.baseURL + "/sysConfig/listSysConfig")
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.$store.commit("loadSysConfig", res.data);
|
||||
this.buildCssPicture();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
buildCssPicture() {
|
||||
let root = document.querySelector(":root");
|
||||
let webStaticResourcePrefix = this.$store.state.sysConfig['webStaticResourcePrefix'];
|
||||
root.style.setProperty("--commentURL", "url(" + webStaticResourcePrefix + "assets/commentURL.png)");
|
||||
root.style.setProperty("--springBg", "url(" + webStaticResourcePrefix + "assets/springBg.png)");
|
||||
root.style.setProperty("--admireImage", "url(" + webStaticResourcePrefix + "assets/admireImage.jpg)");
|
||||
root.style.setProperty("--toTop", "url(" + webStaticResourcePrefix + "assets/toTop.png)");
|
||||
root.style.setProperty("--bannerWave1", "url(" + webStaticResourcePrefix + "assets/bannerWave1.png) repeat-x");
|
||||
root.style.setProperty("--bannerWave2", "url(" + webStaticResourcePrefix + "assets/bannerWave2.png) repeat-x");
|
||||
root.style.setProperty("--backgroundPicture", "url(" + webStaticResourcePrefix + "assets/backgroundPicture.jpg)");
|
||||
root.style.setProperty("--toolbar", "url(" + webStaticResourcePrefix + "assets/toolbar.jpg)");
|
||||
root.style.setProperty("--love", "url(" + webStaticResourcePrefix + "assets/love.jpg)");
|
||||
const font = new FontFace("poetize-font", "url(" + webStaticResourcePrefix + "assets/font.woff2)");
|
||||
font.load();
|
||||
document.fonts.add(font);
|
||||
},
|
||||
getSortInfo() {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/getSortInfo")
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.$store.commit("loadSortInfo", res.data);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
changeColor() {
|
||||
this.isDark = !this.isDark;
|
||||
let root = document.querySelector(":root");
|
||||
|
||||
if (this.isDark) {
|
||||
root.style.setProperty("--background", "#272727");
|
||||
root.style.setProperty("--fontColor", "white");
|
||||
root.style.setProperty("--borderColor", "#4F4F4F");
|
||||
root.style.setProperty("--borderHoverColor", "black");
|
||||
root.style.setProperty("--articleFontColor", "#E4E4E4");
|
||||
root.style.setProperty("--articleGreyFontColor", "#D4D4D4");
|
||||
root.style.setProperty("--commentContent", "#D4D4D4");
|
||||
root.style.setProperty("--favoriteBg", "#1e1e1e");
|
||||
} else {
|
||||
root.style.setProperty("--background", "white");
|
||||
root.style.setProperty("--fontColor", "black");
|
||||
root.style.setProperty("--borderColor", "rgba(0, 0, 0, 0.5)");
|
||||
root.style.setProperty("--borderHoverColor", "rgba(110, 110, 110, 0.4)");
|
||||
root.style.setProperty("--articleFontColor", "#1F1F1F");
|
||||
root.style.setProperty("--articleGreyFontColor", "#616161");
|
||||
root.style.setProperty("--commentContent", "#F7F9FE");
|
||||
root.style.setProperty("--favoriteBg", "#f7f9fe");
|
||||
}
|
||||
},
|
||||
toTop() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth"
|
||||
});
|
||||
},
|
||||
onScrollPage() {
|
||||
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
},
|
||||
isDaylight() {
|
||||
let currDate = new Date();
|
||||
if (currDate.getHours() > 22 || currDate.getHours() < 7) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
clickTocButton() {
|
||||
let display = $(".toc");
|
||||
if ("none" === display.css("display")) {
|
||||
display.css("display", "unset");
|
||||
} else {
|
||||
display.css("display", "none");
|
||||
}
|
||||
},
|
||||
changeMouseAnimation() {
|
||||
this.mouseAnimation = !this.mouseAnimation;
|
||||
if (this.mouseAnimation) {
|
||||
this.$nextTick(() => {
|
||||
mousedown();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.toolbar-content {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
color: var(--white);
|
||||
/* 固定位置，不随滚动条滚动 */
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
/* 禁止选中文字 */
|
||||
user-select: none;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.toolbar-content.enter {
|
||||
background: var(--toolbarBackground);
|
||||
color: var(--toolbarFont);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 34, 77, 0.05);
|
||||
}
|
||||
|
||||
.toolbar-content.hoverEnter {
|
||||
background: var(--translucent);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 34, 77, 0.05);
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
margin-left: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-mobile-menu {
|
||||
font-size: 30px;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.scroll-menu {
|
||||
margin: 0 25px 0 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.scroll-menu li {
|
||||
list-style: none;
|
||||
margin: 0 8px;
|
||||
font-size: 17px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.scroll-menu li:hover .my-menu span {
|
||||
color: var(--themeBackground);
|
||||
}
|
||||
|
||||
.scroll-menu li:hover .my-menu i {
|
||||
color: var(--themeBackground);
|
||||
animation: scale 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.scroll-menu li .my-menu:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 6px;
|
||||
background-color: var(--themeBackground);
|
||||
width: 100%;
|
||||
max-width: 0;
|
||||
transition: max-width 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.scroll-menu li:hover .my-menu:after {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sortMenu {
|
||||
margin-left: 44px;
|
||||
font-size: 17px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sortMenu:after {
|
||||
top: 32px;
|
||||
width: 35px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background: var(--themeBackground);
|
||||
content: "";
|
||||
border-radius: 1px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.el-dropdown {
|
||||
font-size: unset;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
.el-popper[x-placement^=bottom] {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
.el-dropdown-menu {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
font-size: unset;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item:hover {
|
||||
background-color: var(--white);
|
||||
color: var(--themeBackground);
|
||||
}
|
||||
|
||||
.toolButton {
|
||||
position: fixed;
|
||||
right: 3vh;
|
||||
bottom: 3vh;
|
||||
animation: slide-bottom 0.5s ease-in-out both;
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
font-size: 25px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#toc-button {
|
||||
animation: slide-bottom 0.5s ease-in-out both;
|
||||
cursor: pointer;
|
||||
font-size: 23px;
|
||||
width: 30px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
#toc-button:hover {
|
||||
color: var(--themeBackground);
|
||||
}
|
||||
|
||||
.my-setting {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.my-setting i {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.my-setting i:hover {
|
||||
color: var(--themeBackground);
|
||||
}
|
||||
|
||||
.cd-top {
|
||||
background: var(--toTop) no-repeat center;
|
||||
position: fixed;
|
||||
right: 5vh;
|
||||
top: -900px;
|
||||
z-index: 99;
|
||||
width: 70px;
|
||||
height: 900px;
|
||||
background-size: contain;
|
||||
transition: all 0.5s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.backTop {
|
||||
transition: all 0.3s ease-in;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: -13px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.backTop:hover {
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
#outerImg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.toolButton {
|
||||
right: 0.5vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
631
src/components/index.vue
Normal file
631
src/components/index.vue
Normal file
@ -0,0 +1,631 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 首页图片 -->
|
||||
<el-image style="animation: header-effect 2s"
|
||||
class="background-image-index"
|
||||
v-once
|
||||
lazy
|
||||
:src="!$common.isEmpty($store.state.webInfo.backgroundImage)?$store.state.webInfo.backgroundImage:$store.state.webInfo.randomCover[Math.floor(Math.random() * $store.state.webInfo.randomCover.length)]"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot background-image-index-error"></div>
|
||||
</el-image>
|
||||
<!-- 首页文字 -->
|
||||
<div class="signature-wall myCenter my-animation-hideToShow">
|
||||
<h1 class="playful">
|
||||
<span v-for="(a, index) in $store.state.webInfo.webTitle" :key="index">{{a}}</span>
|
||||
</h1>
|
||||
<div class="printer" @click="getGuShi()">
|
||||
<printer :printerInfo="printerInfo">
|
||||
<template slot="paper" slot-scope="scope">
|
||||
<h3>
|
||||
{{ scope.content }}<span class="cursor">|</span>
|
||||
</h3>
|
||||
</template>
|
||||
</printer>
|
||||
</div>
|
||||
<div id="bannerWave1"></div>
|
||||
<div id="bannerWave2"></div>
|
||||
<i class="el-icon-arrow-down" @click="navigation('.page-container-wrap')"></i>
|
||||
</div>
|
||||
<!-- 首页内容 -->
|
||||
<div class="page-container-wrap">
|
||||
<div class="page-container">
|
||||
<div class="aside-content" v-if="showAside">
|
||||
<myAside @selectSort="selectSort" @selectArticle="selectArticle"></myAside>
|
||||
</div>
|
||||
<div class="recent-posts">
|
||||
<div class="announcement background-opacity">
|
||||
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
||||
<div>
|
||||
<div v-for="(notice, index) in $common.pushNotification($store.state.webInfo.notices, true)" :key="index">
|
||||
{{ notice }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="indexType === 1">
|
||||
<div v-for="(sort, index) in sortInfo" :key="index">
|
||||
<div v-if="!$common.isEmpty(sortArticles[sort.id])">
|
||||
<div class="sort-article-first">
|
||||
<div>
|
||||
<svg viewBox="0 0 1024 1024" width="20" height="20"
|
||||
style="vertical-align: -2px;margin-bottom: -2px">
|
||||
<path
|
||||
d="M367.36 482.304H195.9936c-63.3344 0-114.6368-51.3536-114.6368-114.6368V196.2496c0-63.3344 51.3536-114.6368 114.6368-114.6368h171.4176c63.3344 0 114.6368 51.3536 114.6368 114.6368V367.616c0 63.3344-51.3536 114.688-114.688 114.688zM367.36 938.752H195.9936c-63.3344 0-114.6368-51.3536-114.6368-114.6368v-171.4176c0-63.3344 51.3536-114.6368 114.6368-114.6368h171.4176c63.3344 0 114.6368 51.3536 114.6368 114.6368v171.4176c0 63.3344-51.3536 114.6368-114.688 114.6368zM828.672 938.752h-171.4176c-63.3344 0-114.6368-51.3536-114.6368-114.6368v-171.4176c0-63.3344 51.3536-114.6368 114.6368-114.6368h171.4176c63.3344 0 114.6368 51.3536 114.6368 114.6368v171.4176c0 63.3344-51.3024 114.6368-114.6368 114.6368zM828.672 482.304h-171.4176c-63.3344 0-114.6368-51.3536-114.6368-114.6368V196.2496c0-63.3344 51.3536-114.6368 114.6368-114.6368h171.4176c63.3344 0 114.6368 51.3536 114.6368 114.6368V367.616c0 63.3344-51.3024 114.688-114.6368 114.688z"
|
||||
fill="#FF623E"></path>
|
||||
</svg>
|
||||
{{sort.sortName}}
|
||||
</div>
|
||||
<div class="article-more" @click="$router.push({path: '/sort', query: {sortId: sort.id}})">
|
||||
<svg viewBox="0 0 1024 1024" width="20" height="20"
|
||||
style="vertical-align: -2px;margin-bottom: -2px">
|
||||
<path
|
||||
d="M347.3 897.3H142.2c-30.8 0-51.4-31.7-38.9-59.9l136.1-306.1c4.9-11 4.9-23.6 0-34.6L103.3 190.6c-12.5-28.2 8.1-59.9 38.9-59.9h205.1c16.8 0 32.1 9.9 38.9 25.3l151.4 340.7c4.9 11 4.9 23.6 0 34.6L386.3 872.1c-6.9 15.3-22.1 25.2-39 25.2z"
|
||||
fill="#009F72"></path>
|
||||
<path
|
||||
d="M730.4 897.3H525.3c-30.8 0-51.4-31.7-38.9-59.9l136.1-306.1c4.9-11 4.9-23.6 0-34.6L486.4 190.6c-12.5-28.2 8.1-59.9 38.9-59.9h205.1c16.8 0 32.1 9.9 38.9 25.3l151.4 340.7c4.9 11 4.9 23.6 0 34.6L769.3 872.1c-6.8 15.3-22.1 25.2-38.9 25.2z"
|
||||
fill="#F9DB88"></path>
|
||||
</svg>
|
||||
MORE
|
||||
</div>
|
||||
</div>
|
||||
<sortArticle :articleList="sortArticles[sort.id]"></sortArticle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="indexType === 2">
|
||||
<articleList :articleList="articles"></articleList>
|
||||
<div class="pagination-wrap">
|
||||
<div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">
|
||||
下一页
|
||||
</div>
|
||||
<div v-else style="user-select: none">
|
||||
~~到底啦~~
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 页脚 -->
|
||||
<div style="background: var(--background)">
|
||||
<myFooter></myFooter>
|
||||
</div>
|
||||
|
||||
<el-dialog title="每日推荐"
|
||||
:visible.sync="pushDialogVisible"
|
||||
width="60%"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
class="index-push"
|
||||
center>
|
||||
<div style="display: flex;align-items: center;flex-direction: column">
|
||||
<div class="push-title">
|
||||
{{ push['标题'] }}
|
||||
</div>
|
||||
|
||||
<el-image class="push-el-image"
|
||||
lazy
|
||||
:src="push['封面']"
|
||||
fit="cover">
|
||||
</el-image>
|
||||
|
||||
<div class="push-button" @click="pushUrl(push['链接'])">
|
||||
<span class="push-button-title">立即前往</span>
|
||||
<span class="push-button-car">
|
||||
<svg viewBox="0 0 1024 1024" width="40" height="40">
|
||||
<path
|
||||
d="M399.502 655.103c0 7.902-6.665 14.311-14.88 14.311H72.188c-8.215 0-14.875-6.407-14.875-14.311v-28.634c0-7.913 6.66-14.315 14.875-14.315h312.435c8.217 0 14.88 6.402 14.88 14.315l-0.001 28.634zM968.167 655.103c0 7.902-6.664 14.311-14.882 14.311H640.851c-8.216 0-14.877-6.407-14.877-14.311v-28.634c0-7.913 6.661-14.315 14.877-14.315h312.436c8.218 0 14.882 6.402 14.882 14.315l-0.002 28.634z"
|
||||
fill="#EA0606"></path><path
|
||||
d="M968.097 624.008c0 11.563-17.723 20.937-39.583 20.937H97.263c-21.858 0-39.579-9.372-39.579-20.937v-41.876c0-11.562 17.72-20.935 39.579-20.935h831.25c21.86 0 39.583 9.373 39.583 20.935v41.876zM855.003 526.553h-12c0-161.793-151.025-293.421-336.66-293.421-185.633 0-336.656 131.628-336.656 293.421h-12c0-41.334 9.261-81.425 27.527-119.161 17.612-36.384 42.807-69.046 74.886-97.079 65.813-57.509 153.264-89.181 246.243-89.181 92.981 0 180.434 31.672 246.247 89.181 32.079 28.032 57.274 60.693 74.887 97.079 18.264 37.734 27.526 77.826 27.526 119.161z"
|
||||
fill="#EA0606"></path><path
|
||||
d="M1001.996 588.091c-121.146 13.91-980.875 0-980.875 0s-30.62-203.887 241.944-144.555c171.281-1.178 273.436 0 489.644 0 193.07-59.332 283.186 108.642 249.287 144.555z"
|
||||
fill="#EA0606"></path><path
|
||||
d="M500.343 214.379h12v330.342h-12z"
|
||||
fill="#EA0606"></path><path
|
||||
d="M333.217 657.192c0 46.174-38.961 83.602-87.029 83.602-48.056 0-87.021-37.428-87.021-83.602 0-46.172 38.963-83.588 87.021-83.588 48.067 0 87.029 37.417 87.029 83.588z"
|
||||
fill="#FFFFFF"></path><path
|
||||
d="M246.188 743.794c-49.638 0-90.021-38.85-90.021-86.602 0-47.745 40.383-86.588 90.021-86.588 49.642 0 90.029 38.843 90.029 86.588 0 47.752-40.387 86.602-90.029 86.602z m0-167.19c-46.329 0-84.021 36.151-84.021 80.588 0 44.444 37.692 80.602 84.021 80.602 46.333 0 84.029-36.157 84.029-80.602 0-44.436-37.696-80.588-84.029-80.588z"
|
||||
fill="#440A0A"></path><path
|
||||
d="M309.872 656.757c0 33.159-27.986 60.035-62.491 60.035-34.51 0-62.487-26.876-62.487-60.035 0-33.16 27.977-60.022 62.487-60.022 34.505 0.001 62.491 26.862 62.491 60.022z"
|
||||
fill="#440A0A"></path><path
|
||||
d="M271.322 657.558c0 11.747-9.918 21.282-22.151 21.282-12.237 0-22.152-9.535-22.152-21.282 0-11.758 9.916-21.277 22.152-21.277 12.233-0.002 22.151 9.519 22.151 21.277z"
|
||||
fill="#FFFFFF"></path><path
|
||||
d="M875.521 642.811c0 46.175-38.963 83.603-87.027 83.603-48.061 0-87.021-37.428-87.021-83.603 0-46.173 38.962-83.587 87.021-83.587 48.066 0 87.027 37.414 87.027 83.587z"
|
||||
fill="#FFFFFF"></path><path
|
||||
d="M788.494 729.413c-49.638 0-90.021-38.85-90.021-86.603 0-47.744 40.384-86.587 90.021-86.587 49.642 0 90.027 38.843 90.027 86.587 0 47.753-40.385 86.603-90.027 86.603z m0-167.189c-46.33 0-84.021 36.151-84.021 80.587 0 44.444 37.691 80.603 84.021 80.603 46.333 0 84.027-36.158 84.027-80.603 0-44.436-37.694-80.587-84.027-80.587z"
|
||||
fill="#440A0A"></path><path
|
||||
d="M852.174 642.374c0 33.159-27.979 60.037-62.486 60.037-34.512 0-62.487-26.878-62.487-60.037 0-33.161 27.977-60.023 62.487-60.023 34.506-0.001 62.486 26.862 62.486 60.023z"
|
||||
fill="#440A0A"></path><path
|
||||
d="M813.628 643.173c0 11.75-9.919 21.278-22.153 21.278-12.233 0-22.151-9.528-22.151-21.278 0-11.759 9.919-21.275 22.151-21.275 12.235-0.002 22.153 9.516 22.153 21.275z"
|
||||
fill="#FFFFFF"></path><path
|
||||
d="M518.135 469.838h56.847v12.556h-56.847z"
|
||||
fill="#FFFFFF"></path><path
|
||||
d="M522.818 468.694c0 7.902-0.648 14.309-1.445 14.309h-30.37c-0.799 0-1.446-6.406-1.446-14.309V440.06c0-7.912 0.647-14.315 1.446-14.315h30.37c0.797 0 1.445 6.403 1.445 14.315v28.634z"
|
||||
fill="#EA0606">
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const printer = () => import( "./common/printer");
|
||||
const articleList = () => import( "./articleList");
|
||||
const sortArticle = () => import( "./common/sortArticle");
|
||||
const myFooter = () => import( "./common/myFooter");
|
||||
const myAside = () => import( "./myAside");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
printer,
|
||||
articleList,
|
||||
sortArticle,
|
||||
myFooter,
|
||||
myAside
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
pushDialogVisible: false,
|
||||
push: {},
|
||||
showAside: true,
|
||||
indexType: 1,
|
||||
printerInfo: "你看对面的青山多漂亮",
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
searchKey: "",
|
||||
sortId: null,
|
||||
articleSearch: ""
|
||||
},
|
||||
guShi: {
|
||||
"content": "",
|
||||
"origin": "",
|
||||
"author": "",
|
||||
"category": ""
|
||||
},
|
||||
articles: [],
|
||||
sortArticles: {}
|
||||
};
|
||||
},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getGuShi();
|
||||
this.getSortArticles();
|
||||
},
|
||||
|
||||
computed: {
|
||||
sortInfo() {
|
||||
return this.$store.state.sortInfo;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.push = this.$common.pushNotification(this.$store.state.webInfo.notices, false);
|
||||
if(!this.$common.isEmpty(this.push)) {
|
||||
if("0" !== localStorage.getItem("showPushNotification_" + this.push['链接'])) {
|
||||
this.pushDialogVisible = true;
|
||||
localStorage.setItem("showPushNotification_" + this.push['链接'], "0");
|
||||
}
|
||||
}
|
||||
}, 2000);
|
||||
},
|
||||
|
||||
methods: {
|
||||
async selectSort(sort) {
|
||||
this.pagination = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
searchKey: "",
|
||||
sortId: sort.id,
|
||||
articleSearch: ""
|
||||
};
|
||||
this.articles = [];
|
||||
await this.getArticles();
|
||||
this.$nextTick(() => {
|
||||
this.indexType = 2;
|
||||
$(".announcement").css("max-width", "780px");
|
||||
document.querySelector('.recent-posts').scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
inline: "nearest"
|
||||
});
|
||||
});
|
||||
},
|
||||
async selectArticle(articleSearch) {
|
||||
this.pagination = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
searchKey: "",
|
||||
sortId: null,
|
||||
articleSearch: articleSearch
|
||||
};
|
||||
this.articles = [];
|
||||
await this.getArticles();
|
||||
this.$nextTick(() => {
|
||||
this.indexType = 2;
|
||||
$(".announcement").css("max-width", "780px");
|
||||
document.querySelector('.recent-posts').scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
inline: "nearest"
|
||||
});
|
||||
});
|
||||
},
|
||||
pageArticles() {
|
||||
this.pagination.current = this.pagination.current + 1;
|
||||
this.getArticles();
|
||||
},
|
||||
|
||||
async getArticles() {
|
||||
await this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.articles = this.articles.concat(res.data.records);
|
||||
this.pagination.total = res.data.total;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
getSortArticles() {
|
||||
this.$http.get(this.$constant.baseURL + "/article/listSortArticle")
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.sortArticles = res.data;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
navigation(selector) {
|
||||
let pageId = document.querySelector(selector);
|
||||
window.scrollTo({
|
||||
top: pageId.offsetTop,
|
||||
behavior: "smooth"
|
||||
});
|
||||
},
|
||||
pushUrl(url) {
|
||||
window.open(url);
|
||||
},
|
||||
getGuShi() {
|
||||
let that = this;
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('get', this.$constant.jinrishici);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
that.guShi = JSON.parse(xhr.responseText);
|
||||
that.printerInfo = that.guShi.content;
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.background-image-index {
|
||||
width: 100vw;
|
||||
height: 50vh;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.background-image-index::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.background-image-index-error {
|
||||
background-color: var(--lightGreen);
|
||||
width: 100vw;
|
||||
height: 50vh;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.signature-wall {
|
||||
/* 向下排列 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
height: 50vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.playful {
|
||||
color: var(--white);
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.sort-article-first {
|
||||
margin: 40px auto 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--greyFont);
|
||||
border-bottom: 1px dashed var(--lightGray);
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.article-more {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.article-more:hover {
|
||||
color: var(--lightGreen);
|
||||
font-weight: 700;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/*.playful span {*/
|
||||
/* position: relative;*/
|
||||
/* color: #5362f6;*/
|
||||
/* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
|
||||
/* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
|
||||
/* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
|
||||
/* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
|
||||
/* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
|
||||
/* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
|
||||
/* 6px 6px #e485f8;*/
|
||||
/* animation: scatter 1.75s infinite;*/
|
||||
/* font-weight: normal;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(2n) {*/
|
||||
/* color: #ed625c;*/
|
||||
/* text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063, 0.75px 0.75px #f2a063,*/
|
||||
/* 1px 1px #f2a063, 1.25px 1.25px #f2a063, 1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063,*/
|
||||
/* 2px 2px #f2a063, 2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,*/
|
||||
/* 3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063, 3.75px 3.75px #f2a063,*/
|
||||
/* 4px 4px #f2a063, 4.25px 4.25px #f2a063, 4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063,*/
|
||||
/* 5px 5px #f2a063, 5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,*/
|
||||
/* 6px 6px #f2a063;*/
|
||||
/* animation-delay: 0.3s;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(3n) {*/
|
||||
/* color: #ffd913;*/
|
||||
/* text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9, 0.75px 0.75px #6ec0a9,*/
|
||||
/* 1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9, 1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9,*/
|
||||
/* 2px 2px #6ec0a9, 2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,*/
|
||||
/* 3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9, 3.75px 3.75px #6ec0a9,*/
|
||||
/* 4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9, 4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9,*/
|
||||
/* 5px 5px #6ec0a9, 5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,*/
|
||||
/* 6px 6px #6ec0a9;*/
|
||||
/* animation-delay: 0.15s;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(5n) {*/
|
||||
/* color: #555bff;*/
|
||||
/* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
|
||||
/* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
|
||||
/* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
|
||||
/* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
|
||||
/* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
|
||||
/* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
|
||||
/* 6px 6px #e485f8;*/
|
||||
/* animation-delay: 0.4s;*/
|
||||
/*}*/
|
||||
|
||||
/*.playful span:nth-child(7n) {*/
|
||||
/* color: #ff9c55;*/
|
||||
/* text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555, 0.75px 0.75px #ff5555,*/
|
||||
/* 1px 1px #ff5555, 1.25px 1.25px #ff5555, 1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555,*/
|
||||
/* 2px 2px #ff5555, 2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,*/
|
||||
/* 3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555, 3.75px 3.75px #ff5555,*/
|
||||
/* 4px 4px #ff5555, 4.25px 4.25px #ff5555, 4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555,*/
|
||||
/* 5px 5px #ff5555, 5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,*/
|
||||
/* 6px 6px #ff5555;*/
|
||||
/* animation-delay: 0.25s;*/
|
||||
/*}*/
|
||||
|
||||
.printer {
|
||||
cursor: pointer;
|
||||
color: var(--white);
|
||||
background: var(--translucent);
|
||||
border-radius: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#bannerWave1 {
|
||||
height: 84px;
|
||||
background: var(--bannerWave1);
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
animation: gradientBG 120s linear infinite;
|
||||
}
|
||||
|
||||
#bannerWave2 {
|
||||
height: 100px;
|
||||
background: var(--bannerWave2);
|
||||
position: absolute;
|
||||
width: 400%;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
animation: gradientBG 120s linear infinite;
|
||||
}
|
||||
|
||||
/* 光标 */
|
||||
.cursor {
|
||||
margin-left: 1px;
|
||||
animation: hideToShow 0.7s infinite;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.el-icon-arrow-down {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: var(--white);
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
animation: my-shake 1.5s ease-out infinite;
|
||||
z-index: 15;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page-container-wrap {
|
||||
background: var(--background);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 90%;
|
||||
padding: 0 20px 40px 20px;
|
||||
margin: 0 auto;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.recent-posts {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.announcement {
|
||||
padding: 22px;
|
||||
border: 1px dashed var(--lightGray);
|
||||
color: var(--greyFont);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
margin: 40px auto 40px;
|
||||
}
|
||||
|
||||
.announcement i {
|
||||
color: var(--themeBackground);
|
||||
font-size: 22px;
|
||||
margin: auto 0;
|
||||
animation: scale 0.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.announcement div div {
|
||||
margin-left: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.aside-content {
|
||||
width: calc(30% - 40px);
|
||||
user-select: none;
|
||||
margin-top: 40px;
|
||||
margin-right: 40px;
|
||||
max-width: 300px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 13px 15px;
|
||||
border: 1px solid var(--lightGray);
|
||||
border-radius: 3rem;
|
||||
color: var(--greyFont);
|
||||
width: 100px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination:hover {
|
||||
border: 1px solid var(--themeBackground);
|
||||
color: var(--themeBackground);
|
||||
box-shadow: 0 0 5px var(--themeBackground);
|
||||
}
|
||||
|
||||
.push-title {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.push-el-image {
|
||||
width: 80%;
|
||||
min-height: 100px;
|
||||
max-height: 400px;
|
||||
border-radius: 15px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.push-button {
|
||||
position: relative;
|
||||
background: var(--lightGreen);
|
||||
cursor: pointer;
|
||||
width: 230px;
|
||||
border-radius: 2rem;
|
||||
line-height: 35px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.push-button-title {
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.push-button-car {
|
||||
position: absolute;
|
||||
margin-left: 55px;
|
||||
animation: passing 4s linear infinite;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
.recent-posts {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
|
||||
.page-container {
|
||||
/* 文章栏与侧标栏垂直排列 */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.aside-content {
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
float: unset;
|
||||
margin: 40px auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
409
src/components/jotting.vue
Normal file
409
src/components/jotting.vue
Normal file
@ -0,0 +1,409 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="my-animation-slide-top myCenter" style="position: relative;height: 45vh">
|
||||
<!-- 背景图片 -->
|
||||
<el-image class="my-el-image jotting-image"
|
||||
style="position: absolute"
|
||||
v-once
|
||||
lazy
|
||||
:src="$store.state.webInfo.randomCover[Math.floor(Math.random() * $store.state.webInfo.randomCover.length)]"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot"></div>
|
||||
</el-image>
|
||||
<el-image style="position: absolute;height: 20vh;left: 10px;top: 0"
|
||||
v-once
|
||||
lazy
|
||||
:src="$store.state.sysConfig['webStaticResourcePrefix'] + 'assets/cloud.png'"
|
||||
fit="cover">
|
||||
<div slot="error"></div>
|
||||
</el-image>
|
||||
<div class="jotting-title">
|
||||
<div style="font-size: 30px">🏖️随笔随心</div>
|
||||
<div style="font-size: 20px">随心所悦，阅读改变生活</div>
|
||||
</div>
|
||||
<div class="jotting-info-news"
|
||||
@click="weiYanDialogVisible = true"
|
||||
v-if="!$common.isEmpty($store.state.currentUser) && $store.state.currentUser.id === $constant.userId">
|
||||
<svg width="30" height="30" viewBox="0 0 1024 1024">
|
||||
<path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01"></path>
|
||||
<path
|
||||
d="M989.866667 512c0 263.918933-213.947733 477.866667-477.866667 477.866667S34.133333 775.918933 34.133333 512 248.081067 34.133333 512 34.133333s477.866667 213.947733 477.866667 477.866667z"
|
||||
fill="#FF7744"></path>
|
||||
<path
|
||||
d="M512 221.866667A51.2 51.2 0 0 1 563.2 273.066667v187.733333H750.933333a51.2 51.2 0 0 1 0 102.4h-187.733333V750.933333a51.2 51.2 0 0 1-102.4 0v-187.733333H273.066667a51.2 51.2 0 0 1 0-102.4h187.733333V273.066667A51.2 51.2 0 0 1 512 221.866667z"
|
||||
fill="#FFFFFF"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="jotting-container">
|
||||
<div class="jotting-content">
|
||||
<div>
|
||||
<div class="jotting-li"
|
||||
v-for="(treeHole, index) in treeHoleList"
|
||||
:key="index">
|
||||
<div style="display: flex">
|
||||
<div style="margin: 10px 15px 10px 10px">
|
||||
<el-avatar shape="square" :size="36"
|
||||
:src="treeHole.avatar"></el-avatar>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<div style="margin: 10px 0 15px">
|
||||
<span class="jotting-username">{{ treeHole.username }}</span>
|
||||
<span class="jotting-lv">{{ treeHole.createTimeLv }}</span>
|
||||
</div>
|
||||
<div style="margin-right: 20px;letter-spacing: 1px;line-height: 1.4">
|
||||
<span v-html="treeHole.content"></span>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;margin: 25px 0 10px">
|
||||
<div style="display: flex">
|
||||
<div class="jotting-time">
|
||||
{{ $common.getDateDiff(treeHole.createTime) }}
|
||||
</div>
|
||||
<div @click="deleteTreeHole(treeHole.id)"
|
||||
class="jotting-delete"
|
||||
v-if="!$common.isEmpty($store.state.currentUser) && $store.state.currentUser.id === treeHole.userId">
|
||||
<svg viewBox="0 0 1024 1024" width="16" height="16" style="vertical-align: -6px;">
|
||||
<path
|
||||
d="M921.1392 155.392h-270.592v-48.2816c0-22.7328-18.432-41.1648-41.1648-41.1648H426.3424a41.1648 41.1648 0 0 0-41.1648 41.1648v48.2816H110.6432c-14.1312 0-25.6 11.4688-25.6 25.6s11.4688 25.6 25.6 25.6h810.496c14.1312 0 25.6-11.4688 25.6-25.6s-11.4688-25.6-25.6-25.6zM170.8032 260.0448v592.8448c0 50.8928 41.2672 92.16 92.16 92.16h500.6848c50.8928 0 92.16-41.2672 92.16-92.16V260.0448H170.8032z m249.1392 462.7968c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V443.0848c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v279.7568z m243.1488 0c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V443.0848c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v279.7568z"
|
||||
fill="#FF623E"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="openComment(treeHole)"
|
||||
style="cursor: pointer;margin-right: 30px;padding: 3px 9px;background: var(--azure);border-radius: 3px">
|
||||
<span style="color: rgb(4, 176, 15)">{{ treeHole.commentCount }} </span>
|
||||
<span>
|
||||
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
|
||||
<path
|
||||
d="M512 82.464153c-244.63772 0-442.955484 171.85302-442.955484 383.832945 0 125.44199 69.434395 236.8258 176.814008 306.863946-0.502443 56.870242 0.00307 168.373779 0.00307 168.373779s107.36938-70.083172 159.796426-102.527095c34.066887 7.272637 69.684082 11.135618 106.34198 11.135618 244.63772 0 442.955484-171.85302 442.955484-383.846248C954.955484 254.318196 756.63772 82.464153 512 82.464153zM299.631218 524.982686c-32.576953 0-58.988486-26.244734-58.988486-58.647725 0-32.386618 26.41051-58.652841 58.988486-58.652841s58.988486 26.266224 58.988486 58.652841C358.618681 498.737952 332.208171 524.982686 299.631218 524.982686zM520.987698 524.982686c-32.580023 0-58.988486-26.244734-58.988486-58.647725 0-32.386618 26.408463-58.652841 58.988486-58.652841 32.574906 0 58.988486 26.266224 58.988486 58.652841C579.976184 498.737952 553.562605 524.982686 520.987698 524.982686zM742.342132 524.982686c-32.574906 0-58.988486-26.244734-58.988486-58.647725 0-32.386618 26.41358-58.652841 58.988486-58.652841 32.576953 0 58.988486 26.266224 58.988486 58.652841C801.330618 498.737952 774.919085 524.982686 742.342132 524.982686z"
|
||||
fill="#04b00f">
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentTreeHole !== null && treeHole.id === currentTreeHole.id"
|
||||
style="padding: 0 25px 20px 60px">
|
||||
<comment :type="'jotting'" :source="treeHole.id" :userId="treeHole.userId"
|
||||
@change="changeTotal"></comment>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-wrap">
|
||||
<div @click="launch()" class="pagination" v-if="pagination.total !== treeHoleList.length">
|
||||
下一页
|
||||
</div>
|
||||
<div v-else style="user-select: none">
|
||||
~~到底啦~~
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<myFooter :showFooter="showFooter"></myFooter>
|
||||
</div>
|
||||
|
||||
<el-dialog title="随笔"
|
||||
:visible.sync="weiYanDialogVisible"
|
||||
width="40%"
|
||||
:before-close="handleClose"
|
||||
:append-to-body="true"
|
||||
destroy-on-close
|
||||
:close-on-click-modal="false"
|
||||
center>
|
||||
<div>
|
||||
<div class="myCenter" style="padding-bottom: 20px">
|
||||
<el-radio-group v-model="isPublic">
|
||||
<el-radio-button :label="true">公开</el-radio-button>
|
||||
<el-radio-button :label="false">私密</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<commentBox :disableGraffiti="true"
|
||||
@submitComment="submitWeiYan">
|
||||
</commentBox>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const myFooter = () => import( "./common/myFooter");
|
||||
const commentBox = () => import( "./comment/commentBox");
|
||||
const comment = () => import( "./comment/comment");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
myFooter,
|
||||
commentBox,
|
||||
comment,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
treeHoleList: [],
|
||||
currentTreeHole: null,
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
userId: this.$constant.userId
|
||||
},
|
||||
weiYanDialogVisible: false,
|
||||
isPublic: true,
|
||||
showFooter: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getWeiYan();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeTotal(total) {
|
||||
this.currentTreeHole.commentCount = total;
|
||||
},
|
||||
openComment(treeHole) {
|
||||
if (this.currentTreeHole !== treeHole) {
|
||||
this.currentTreeHole = treeHole;
|
||||
} else {
|
||||
this.currentTreeHole = null;
|
||||
}
|
||||
},
|
||||
launch() {
|
||||
if (this.pagination.total !== this.treeHoleList.length) {
|
||||
this.pagination.current = this.pagination.current + 1;
|
||||
this.getWeiYan();
|
||||
} else {
|
||||
this.$message({
|
||||
message: "~~到底啦~~",
|
||||
type: "warning"
|
||||
});
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.weiYanDialogVisible = false;
|
||||
},
|
||||
submitWeiYan(content) {
|
||||
let weiYan = {
|
||||
content: content,
|
||||
isPublic: this.isPublic
|
||||
};
|
||||
|
||||
this.$http.post(this.$constant.baseURL + "/weiYan/saveWeiYan", weiYan)
|
||||
.then((res) => {
|
||||
this.getWeiYan(true);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
this.handleClose();
|
||||
},
|
||||
deleteTreeHole(id) {
|
||||
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||
this.$message({
|
||||
message: "请先登录！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.$confirm('确认删除？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.get(this.$constant.baseURL + "/weiYan/deleteWeiYan", {id: id})
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
this.getWeiYan(true);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消删除!'
|
||||
});
|
||||
});
|
||||
},
|
||||
getWeiYan(reset) {
|
||||
this.$http.post(this.$constant.baseURL + "/weiYan/listWeiYan", this.pagination)
|
||||
.then((res) => {
|
||||
this.showFooter = false;
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
res.data.records.forEach(c => {
|
||||
c.content = c.content.replace(/\n{2,}/g, '<div style="height: 12px"></div>');
|
||||
c.content = c.content.replace(/\n/g, '<br/>');
|
||||
c.content = this.$common.faceReg(c.content);
|
||||
c.content = this.$common.pictureReg(c.content);
|
||||
});
|
||||
if (reset) {
|
||||
this.pagination.current = 1;
|
||||
this.treeHoleList = [];
|
||||
this.currentTreeHole = null;
|
||||
}
|
||||
this.treeHoleList = this.treeHoleList.concat(res.data.records);
|
||||
this.pagination.total = res.data.total;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.showFooter = true;
|
||||
this.$common.imgShow(".jotting-content .pictureReg");
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.jotting-title {
|
||||
z-index: 10;
|
||||
letter-spacing: 4px;
|
||||
line-height: 40px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.jotting-image::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--translucent);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.jotting-info-news {
|
||||
position: absolute;
|
||||
bottom: 80px;
|
||||
right: 15%;
|
||||
cursor: pointer;
|
||||
animation: scale 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.jotting-container {
|
||||
background: var(--background);
|
||||
animation: slide-bottom 1s;
|
||||
background-image: linear-gradient(90deg, rgba(60, 10, 30, 0.05) 5%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, 0.05) 5%, transparent 0);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
.jotting-delete {
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.jotting-content {
|
||||
max-width: 700px;
|
||||
width: 80%;
|
||||
background: var(--background);
|
||||
border-radius: 12px;
|
||||
margin: 0 auto;
|
||||
padding: 15px 10px 30px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
|
||||
position: relative;
|
||||
top: -60px;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 7px 14px;
|
||||
border: 1px solid var(--lightGray);
|
||||
border-radius: 1rem;
|
||||
color: var(--greyFont);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pagination:hover {
|
||||
border: 1px solid var(--themeBackground);
|
||||
color: var(--themeBackground);
|
||||
box-shadow: 0 0 5px var(--themeBackground);
|
||||
}
|
||||
|
||||
.jotting-username {
|
||||
color: #607199;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.jotting-lv {
|
||||
color: var(--green);
|
||||
border: 1px solid var(--green);
|
||||
border-radius: 0.2rem;
|
||||
font-size: 12px;
|
||||
padding: 2px 4px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.jotting-time {
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
color: var(--greyFont);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
position: relative;
|
||||
margin: 10px auto;
|
||||
border: 1px solid #f5f5f5;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
|
||||
.jotting-info-news {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.jotting-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
|
||||
.jotting-content {
|
||||
padding: 15px 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
629
src/components/letter.vue
Normal file
629
src/components/letter.vue
Normal file
@ -0,0 +1,629 @@
|
||||
<template>
|
||||
<div class="letter-wrap">
|
||||
|
||||
<div id="jsi-cherry-container" style="z-index: -99;">
|
||||
<canvas width="646" height="754" position="absolute" top="0"></canvas>
|
||||
</div>
|
||||
|
||||
<section class="container" id="contact">
|
||||
<form class="flip">
|
||||
<div class="front">
|
||||
<h2>To Ming</h2>
|
||||
<a id="flip2back" href="#">Flip</a>
|
||||
</div>
|
||||
<div id="content" class="back">
|
||||
<div id="letter">
|
||||
<div class="container">
|
||||
<div class="flip">
|
||||
<div class="front"></div>
|
||||
<div class="back">
|
||||
<p class="letter">Ming<br><br> 夜にはいつも寒いよね、でも、手を繋いでいると、暖かくなるよ！<br> どんなに寒い夜も、君と二人でいれば、ちっとも寒くない！<br><br>
|
||||
<p style="float:right; display:block; width:80px;">Hao</p><span class="typed-cursor"
|
||||
style="animation-iteration-count: infinite;">|</span>
|
||||
<a id="close" href="#">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="top">
|
||||
<a id="flip" href="#contact">Flip</a>
|
||||
</div>
|
||||
<div id="lid" class="container">
|
||||
<div class="flip">
|
||||
<div class="front">
|
||||
<a id="open" href="#content"><span style="background-position: 0px -150px;"></span></a>
|
||||
</div>
|
||||
<div class="back"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<div id="footer">
|
||||
<audio id="music2" preload="auto" loop="" src=""></audio>
|
||||
<a id="music_btn2" href="javascript:playPause();" style="opacity: 1;"></a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.letter-wrap {
|
||||
font-family: Satisfy, serif;
|
||||
}
|
||||
|
||||
#jsi-cherry-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
opacity: 0.618;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
#footer {
|
||||
/*width: 100%; */
|
||||
position: fixed;
|
||||
/*bottom: 100px;*/
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#music_btn2 {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: url(https://haiyong.site/demo/eluvletter/images/play.png) no-repeat;
|
||||
cursor: pointer;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
body {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: url(https://haiyong.site/demo/eluvletter/images/stitch.png) no-repeat;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.typed-cursor {
|
||||
opacity: 0;
|
||||
-webkit-animation: blink 0.7s infinite;
|
||||
-moz-animation: blink 0.7s infinite;
|
||||
animation: blink 0.7s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes blink {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes blink {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* reset */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1;
|
||||
content-zooming: none;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* body */
|
||||
|
||||
body {
|
||||
font-family: Satisfy, serif;
|
||||
color: #837362;
|
||||
background: #fbf8f7;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.6;
|
||||
float: left;
|
||||
font-family: Satisfy, serif;
|
||||
}
|
||||
|
||||
/* links */
|
||||
|
||||
a {
|
||||
color: #9b4849;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #783839;
|
||||
}
|
||||
|
||||
#open {
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
margin-left: 200px;
|
||||
}
|
||||
|
||||
#flip {
|
||||
margin: 160px 20px 0 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#flip2back {
|
||||
margin-top: 150px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#close {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/*****************************/
|
||||
|
||||
section.container {
|
||||
position: relative;
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
margin: 280px auto 0;
|
||||
perspective: 1000px;
|
||||
-webkit-perspective: 1000px;
|
||||
-moz-perspective: 1000px;
|
||||
}
|
||||
|
||||
section.container > form.flip {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
-webkit-transform: rotateY(180deg);
|
||||
-moz-transform: rotateY(180deg);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-webkit-transition: -webkit-transform 0.7s 0s;
|
||||
-moz-transition: -moz-transform 0.7s 0s;
|
||||
-webkit-transform-origin: center center;
|
||||
-moz-transform-origin: center center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
section.container > form.flip > .front, section.container > form.flip > .back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
section.container > form.flip > .back {
|
||||
-webkit-transform: rotateY(180deg);
|
||||
-moz-transform: rotateY(180deg);
|
||||
transform: rotateY(180deg);
|
||||
background: #837362;
|
||||
box-shadow: inset 0 10px 30px -10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
section.container:target > form.flip {
|
||||
-webkit-transform: rotateY(0deg);
|
||||
-moz-transform: rotateY(0deg);
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
|
||||
.no-csstransforms3d section.container:target > form.flip > .back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container#lid {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
-webkit-perspective: 800px;
|
||||
-moz-perspective: 800px;
|
||||
perspective: 800px;
|
||||
z-index: 2;
|
||||
transition: z-index 0s 1s;
|
||||
-moz-transition: z-index 0s 1s;
|
||||
-webkit-transition: z-index 0s 1s;
|
||||
}
|
||||
|
||||
.no-csstransforms3d .container#lid {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#content:target .container#lid {
|
||||
z-index: -1;
|
||||
transition: z-index 0s .5s;
|
||||
-moz-transition: z-index 0s .5s;
|
||||
-webkit-transition: z-index 0s .5s;
|
||||
}
|
||||
|
||||
.no-csstransforms3d #content:target .container#lid {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.no-csstransforms3d .container#lid .back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-csstransforms3d #content:target .container#lid .back {
|
||||
display: block;
|
||||
top: -150px;
|
||||
}
|
||||
|
||||
#lid .flip {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#lid .flip {
|
||||
position: absolute;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
-webkit-transition: -webkit-transform 0.5s 1s;
|
||||
-moz-transition: -moz-transform 0.5s 1s;
|
||||
transition: -moz-transform 0.5s 1s;
|
||||
|
||||
-webkit-transform-origin: left top;
|
||||
-moz-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
#lid .flip > .front, #lid .flip > .back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
#lid .flip > .back {
|
||||
-webkit-transform: rotateX(180deg);
|
||||
-moz-transform: rotateX(180deg);
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
#content:target #lid .flip {
|
||||
-webkit-transform: rotateX(180deg);
|
||||
-moz-transform: rotateX(180deg);
|
||||
transform: rotateX(180deg);
|
||||
|
||||
-webkit-transition-duration: 0.5s;
|
||||
-moz-transition-duration: 0.5s;
|
||||
transition-duration: 0.5s;
|
||||
|
||||
-webkit-transition-delay: 0s;
|
||||
-moz-transition-delay: 0s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
#letter .flip > div, #lid .flip > div, section.container > form.flip > div {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#lid .flip .front, section.container > form.flip .front {
|
||||
background: beige url("https://haiyong.site/demo/eluvletter/images/bg.png");
|
||||
border: 1px #eae1d5 solid;
|
||||
box-shadow: inset 0 0 10px 1px rgba(255, 255, 255, 0.6), 0 2px 3px -2px rgba(0, 0, 0, 0.6);
|
||||
padding: 20px 30px;
|
||||
color: #837362;
|
||||
text-shadow: 0 1px 0 #fff, 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
section.container > form.flip > .front {
|
||||
font-size: 1.25em;
|
||||
background: beige url("https://haiyong.site/demo/eluvletter/images/bg.png");
|
||||
background: url("https://haiyong.site/demo/eluvletter/images/bg.png") no-repeat 450px 20px, url("https://haiyong.site/demo/eluvletter/images/bg.png");
|
||||
padding: 120px 20px 20px 40%;
|
||||
border: 1px #eae1d5 solid;
|
||||
}
|
||||
|
||||
#lid .flip .front {
|
||||
font-size: 1.25em;
|
||||
border-radius: 0 0 40px 40px;
|
||||
}
|
||||
|
||||
#lid .flip .back {
|
||||
background: #837362;
|
||||
border-radius: 40px 40px 0 0;
|
||||
border: 35px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: none;
|
||||
box-shadow: inset 0 10px 30px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#top {
|
||||
text-align: right;
|
||||
background: beige url("https://haiyong.site/demo/eluvletter/images/bg.png");
|
||||
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(163, 140, 130, 0.17) 100%), url("https://haiyong.site/demo/eluvletter/images/bg.png");
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(163, 140, 130, 0.17))), url("https://haiyong.site/demo/eluvletter/images/bg.png");
|
||||
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(163, 140, 130, 0.17) 100%), url("https://haiyong.site/demo/eluvletter/images/bg.png");
|
||||
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(163, 140, 130, 0.17) 100%), url("https://haiyong.site/demo/eluvletter/images/bg.png");
|
||||
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(163, 140, 130, 0.17) 100%), url("https://haiyong.site/demo/eluvletter/images/bg.png");
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 65%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
border: 1px #eae1d5 solid;
|
||||
box-shadow: inset 0 0 10px 1px rgba(255, 255, 255, 0.6), 0 -2px 4px -3px rgba(0, 0, 0, 0.75), 0 2px 3px -2px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
#letter {
|
||||
background: #fafafa;
|
||||
width: 90%;
|
||||
height: 95%;
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
top: 5%;
|
||||
z-index: 0;
|
||||
-webkit-transition: .5s .5s;
|
||||
-moz-transition: .5s .5s;
|
||||
-o-transition: 0s 0s;
|
||||
transition: 0s 0s;
|
||||
}
|
||||
|
||||
#content:target #letter {
|
||||
top: -40%;
|
||||
-o-transition: .5s .5s;
|
||||
transition: .5s .5s;
|
||||
}
|
||||
|
||||
#letter .container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
/*height: 50%;*/
|
||||
-webkit-perspective: 800px;
|
||||
-moz-perspective: 800px;
|
||||
perspective: 800px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-transition: 0s 0s;
|
||||
-moz-transition: 0s 0s;
|
||||
transition: 0s 0s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#letter .flip {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#letter .flip {
|
||||
position: absolute;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
-webkit-transition: -webkit-transform 0.5s 0s;
|
||||
-moz-transition: -moz-transform 0.5s 0s;
|
||||
transition: -moz-transform 0.5s 0s;
|
||||
|
||||
-webkit-transform-origin: left top;
|
||||
-moz-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
#letter .flip > .front, #letter .flip > .back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
#letter .flip > .back {
|
||||
-webkit-transform: rotateX(180deg);
|
||||
-moz-transform: rotateX(180deg);
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
#content:target #letter .flip {
|
||||
-webkit-transform: rotateX(180deg);
|
||||
-moz-transform: rotateX(180deg);
|
||||
transform: rotateX(180deg);
|
||||
|
||||
-webkit-transition-duration: 0.5s;
|
||||
-moz-transition-duration: 0.5s;
|
||||
transition-duration: 0.5s;
|
||||
|
||||
-webkit-transition-delay: 1s;
|
||||
-moz-transition-delay: 1s;
|
||||
transition-delay: 1s;
|
||||
}
|
||||
|
||||
#content:target #letter .container {
|
||||
z-index: -1;
|
||||
-webkit-transition: z-index 0s 1.5s;
|
||||
-moz-transition: z-index 0s 1.5s;
|
||||
transition: z-index 0s 1.5s;
|
||||
}
|
||||
|
||||
#letter .flip .front {
|
||||
background: #fafafa;
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.no-csstransforms3d #content:target #letter .flip .front {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#letter .flip .back {
|
||||
background: #fafafa;
|
||||
background: -webkit-linear-gradient(top, #fafafa 90%, #f7f7f7 100%);
|
||||
background: -moz-linear-gradient(top, #fafafa 80%, #f7f7f7 100%);
|
||||
padding: 40px 40px 0;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 -5px 8px -4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.no-csstransforms3d #content:target #letter .flip .back {
|
||||
top: -140px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px dotted #837362;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
|
||||
width: 50%;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
outline: none;
|
||||
border-bottom: 1px solid #837362;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin: 10px auto 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 90%;
|
||||
height: 160px;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
background: transparent;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
border: 1px dashed #c8bfb6;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
background-color: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 255, 255, 0.46);
|
||||
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
-webkit-appearance: none;
|
||||
font-size: .9em;
|
||||
background: #9b4849;
|
||||
padding: 5px 20px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #9b4849;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
color: #fff;
|
||||
-webkit-transition: background .5s;
|
||||
}
|
||||
|
||||
input[type="submit"]:hover {
|
||||
background: #783839;
|
||||
}
|
||||
|
||||
/*-------ie8-----------*/
|
||||
.container.target > form.flip > .back, #content.target #letter .flip .front {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#content.target .container#lid {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#content.target .container#lid .back {
|
||||
display: block;
|
||||
top: -150px;
|
||||
}
|
||||
|
||||
#content.target #letter {
|
||||
top: -40%;
|
||||
}
|
||||
|
||||
#content.target #letter .flip .back {
|
||||
top: -140px;
|
||||
}
|
||||
</style>
|
||||
1269
src/components/love.vue
Normal file
1269
src/components/love.vue
Normal file
File diff suppressed because it is too large
Load Diff
183
src/components/message.vue
Normal file
183
src/components/message.vue
Normal file
@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-image style="animation: header-effect 2s"
|
||||
class="background-image"
|
||||
v-once
|
||||
lazy
|
||||
:src="$store.state.webInfo.randomCover[Math.floor(Math.random() * $store.state.webInfo.randomCover.length)]"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot background-image-error"></div>
|
||||
</el-image>
|
||||
<!-- 输入框 -->
|
||||
<div class="message-in" style="text-align: center">
|
||||
<h2 class="message-title">树洞</h2>
|
||||
<div>
|
||||
<input class="message-input"
|
||||
type="text"
|
||||
style="outline: none;width: 70%"
|
||||
placeholder="留下点什么啦~"
|
||||
v-model="messageContent"
|
||||
@click="show = true"
|
||||
maxlength="60"/>
|
||||
<button v-show="show"
|
||||
style="margin-left: 12px;cursor: pointer;width: 20%"
|
||||
@click="submitMessage"
|
||||
class="message-input">发射
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 弹幕 -->
|
||||
<div class="barrage-container">
|
||||
<vue-baberrage :barrageList="barrageList" :loop="true"></vue-baberrage>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-wrap">
|
||||
<div class="comment-content">
|
||||
<comment :source="$constant.source" :type="'message'" :userId="$constant.userId"></comment>
|
||||
</div>
|
||||
<myFooter></myFooter>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const comment = () => import( "./comment/comment");
|
||||
const myFooter = () => import( "./common/myFooter");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
comment,
|
||||
myFooter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
messageContent: "",
|
||||
// background: {"background": "url(" + this.$store.state.webInfo.backgroundImage + ") center center / cover no-repeat"},
|
||||
barrageList: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTreeHole();
|
||||
},
|
||||
methods: {
|
||||
getTreeHole() {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/listTreeHole")
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
res.data.forEach(m => {
|
||||
this.barrageList.push({
|
||||
id: m.id,
|
||||
avatar: m.avatar,
|
||||
msg: m.message,
|
||||
time: Math.floor(Math.random() * 5 + 10)
|
||||
});
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
submitMessage() {
|
||||
if (this.messageContent.trim() === "") {
|
||||
this.$message({
|
||||
message: "你还没写呢~",
|
||||
type: "warning"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let treeHole = {
|
||||
message: this.messageContent.trim()
|
||||
};
|
||||
|
||||
if (!this.$common.isEmpty(this.$store.state.currentUser) && !this.$common.isEmpty(this.$store.state.currentUser.avatar)) {
|
||||
treeHole.avatar = this.$store.state.currentUser.avatar;
|
||||
}
|
||||
|
||||
|
||||
this.$http.post(this.$constant.baseURL + "/webInfo/saveTreeHole", treeHole)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.barrageList.push({
|
||||
id: res.data.id,
|
||||
avatar: res.data.avatar,
|
||||
msg: res.data.message,
|
||||
time: Math.floor(Math.random() * 5 + 10)
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
|
||||
this.messageContent = "";
|
||||
this.show = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.message-in {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: var(--white);
|
||||
animation: hideToShow 2.5s;
|
||||
width: 360px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message-input {
|
||||
border-radius: 1.2rem;
|
||||
border: var(--white) 1px solid;
|
||||
color: var(--white);
|
||||
background: var(--transparent);
|
||||
padding: 10px 10px;
|
||||
}
|
||||
|
||||
.message-input::-webkit-input-placeholder {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.barrage-container {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: calc(100% - 50px);
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.comment-wrap {
|
||||
background: var(--background);
|
||||
position: absolute;
|
||||
top: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
</style>
|
||||
489
src/components/myAside.vue
Normal file
489
src/components/myAside.vue
Normal file
@ -0,0 +1,489 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="myAside-container">
|
||||
<!-- 网站信息 -->
|
||||
<div v-if="!$common.mobile()" class="card-content1 shadow-box background-opacity">
|
||||
<el-avatar style="margin-top: 20px" class="user-avatar" :size="120" :src="webInfo.avatar"></el-avatar>
|
||||
<div class="web-name">{{webInfo.webName}}</div>
|
||||
<div class="web-info">
|
||||
<div class="blog-info-box">
|
||||
<span>文章</span>
|
||||
<span class="blog-info-num">{{ $store.getters.articleTotal }}</span>
|
||||
</div>
|
||||
<div class="blog-info-box">
|
||||
<span>分类</span>
|
||||
<span class="blog-info-num">{{ sortInfo.length }}</span>
|
||||
</div>
|
||||
<div class="blog-info-box">
|
||||
<span>访问量</span>
|
||||
<span class="blog-info-num">{{ webInfo.historyAllCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="collection-btn" @click="showTip()">
|
||||
<i class="el-icon-star-off" style="margin-right: 2px"></i>朋友圈
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 搜索 -->
|
||||
<div style="padding: 15px;border-radius: 10px;animation: hideToShow 1s ease-in-out"
|
||||
class="shadow-box background-opacity wow">
|
||||
<div style="color: var(--lightGreen);font-size: 20px;font-weight: bold;margin-bottom: 10px">
|
||||
搜索
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<input class="ais-SearchBox-input" type="text"
|
||||
v-model="articleSearch"
|
||||
placeholder="搜索文章" maxlength="32">
|
||||
<div class="ais-SearchBox-submit" @click="selectArticle()">
|
||||
<svg style="margin-top: 3.5px;margin-left: 18px" viewBox="0 0 1024 1024" width="20" height="20">
|
||||
<path
|
||||
d="M51.2 508.8c0 256.8 208 464.8 464.8 464.8s464.8-208 464.8-464.8-208-464.8-464.8-464.8-464.8 208-464.8 464.8z"
|
||||
fill="#51C492"></path>
|
||||
<path
|
||||
d="M772.8 718.4c48-58.4 76.8-132.8 76.8-213.6 0-186.4-151.2-337.6-337.6-337.6-186.4 0-337.6 151.2-337.6 337.6 0 186.4 151.2 337.6 337.6 337.6 81.6 0 156-28.8 213.6-76.8L856 896l47.2-47.2-130.4-130.4zM512 776c-149.6 0-270.4-121.6-270.4-271.2S363.2 233.6 512 233.6c149.6 0 271.2 121.6 271.2 271.2C782.4 654.4 660.8 776 512 776z"
|
||||
fill="#FFFFFF"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 推荐文章 -->
|
||||
<div v-if="!$common.isEmpty(recommendArticles)"
|
||||
style="padding: 25px;border-radius: 10px;animation: hideToShow 1s ease-in-out"
|
||||
class="shadow-box background-opacity wow">
|
||||
<div class="card-content2-title">
|
||||
<span>🔥推荐文章</span>
|
||||
</div>
|
||||
<div v-for="(article, index) in recommendArticles"
|
||||
:key="index"
|
||||
@click="$router.push({path: `/article/${article.id}`})">
|
||||
<div class="aside-post-detail">
|
||||
<div class="aside-post-image">
|
||||
<el-image lazy class="my-el-image" :src="article.articleCover" fit="cover">
|
||||
<div slot="error" class="image-slot">
|
||||
<div class="error-aside-image">
|
||||
{{article.username}}
|
||||
</div>
|
||||
</div>
|
||||
</el-image>
|
||||
<div class="hasVideo transformCenter" v-if="article.hasVideo">
|
||||
<svg viewBox="0 0 1024 1024" width="30" height="30">
|
||||
<path
|
||||
d="M514 114.3c-219.9 0-398.9 178.9-398.9 398.9 0.1 219.9 179 398.8 398.9 398.8 219.9 0 398.8-178.9 398.8-398.8S733.9 114.3 514 114.3z m173 421.9L437.1 680.5c-17.7 10.2-39.8-2.6-39.8-23V368.9c0-20.4 22.1-33.2 39.8-23L687 490.2c17.7 10.2 17.7 35.8 0 46z"
|
||||
fill="#0C0C0C"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aside-post-title">
|
||||
{{ article.articleTitle }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="aside-post-date">
|
||||
<i class="el-icon-date" style="color: var(--greyFont)"></i>{{ article.createTime }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 速览 -->
|
||||
<div v-if="!$common.mobile()" class="selectSort">
|
||||
<div v-for="(sort, index) in sortInfo"
|
||||
@click="selectSort(sort)"
|
||||
:key="index"
|
||||
:style="{background: $constant.sortColor[index % $constant.sortColor.length]}"
|
||||
class="shadow-box-mini background-opacity wow"
|
||||
style="position: relative;padding: 10px 25px 15px;border-radius: 10px;animation: hideToShow 1s ease-in-out;cursor: pointer;color: var(--white)">
|
||||
<div>速览</div>
|
||||
<div class="sort-name">
|
||||
{{sort.sortName}}
|
||||
</div>
|
||||
<div style="font-weight: bold;margin-top: 15px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden">
|
||||
{{sort.sortDescription}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分类 -->
|
||||
<div class="shadow-box background-opacity wow"
|
||||
v-if="false"
|
||||
style="padding: 25px 25px 5px;border-radius: 10px;animation: hideToShow 1s ease-in-out">
|
||||
<div class="card-content2-title">
|
||||
<i class="el-icon-folder-opened card-content2-icon"></i>
|
||||
<span>分类</span>
|
||||
</div>
|
||||
<div v-for="(sort, index) in sortInfo"
|
||||
:key="index"
|
||||
class="post-sort"
|
||||
@click="$router.push({path: '/sort', query: {sortId: sort.id}})">
|
||||
<div>
|
||||
<span v-for="(s, i) in sort.sortName.split('')" :key="i">{{ s }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 赞赏 -->
|
||||
<div class="shadow-box-mini background-opacity wow admire-box"
|
||||
v-if="!$common.isEmpty(admires) && false">
|
||||
<div style="font-weight: bold;margin-bottom: 20px">🧨赞赏名单</div>
|
||||
<div>
|
||||
<vue-seamless-scroll :data="admires" style="height: 200px;overflow: hidden">
|
||||
<div v-for="(item, i) in admires"
|
||||
style="display: flex;justify-content: space-between"
|
||||
:key="i">
|
||||
<div style="display: flex">
|
||||
<el-avatar style="margin-bottom: 10px" :size="36" :src="item.avatar"></el-avatar>
|
||||
<div style="margin-left: 10px;height: 36px;line-height: 36px;overflow: hidden;max-width: 80px">
|
||||
{{ item.username }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 36px;line-height: 36px">
|
||||
{{ item.admire }}元
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="admire-btn" @click="showAdmire()">
|
||||
赞赏
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信 -->
|
||||
<el-dialog title="赞赏"
|
||||
:visible.sync="showAdmireDialog"
|
||||
width="25%"
|
||||
:append-to-body="true"
|
||||
destroy-on-close
|
||||
center>
|
||||
<div>
|
||||
<div class="admire-image"></div>
|
||||
<div>
|
||||
<div class="admire-content">1. 感谢老铁送来的666</div>
|
||||
<div class="admire-content">2. 申请通过后会加博客交流群，不需要加群或者退群后会定期清理好友（强迫症福利）</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
vueSeamlessScroll
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 5,
|
||||
recommendStatus: true
|
||||
},
|
||||
recommendArticles: [],
|
||||
admires: [],
|
||||
showAdmireDialog: false,
|
||||
articleSearch: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
webInfo() {
|
||||
return this.$store.state.webInfo;
|
||||
},
|
||||
sortInfo() {
|
||||
return this.$store.getters.navigationBar;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getRecommendArticles();
|
||||
},
|
||||
methods: {
|
||||
selectSort(sort) {
|
||||
this.$emit("selectSort", sort);
|
||||
},
|
||||
selectArticle() {
|
||||
this.$emit("selectArticle", this.articleSearch);
|
||||
},
|
||||
showAdmire() {
|
||||
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||
this.$message({
|
||||
message: "请先登录！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.showAdmireDialog = true;
|
||||
},
|
||||
getAdmire() {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/getAdmire")
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.admires = res.data;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
getRecommendArticles() {
|
||||
this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.recommendArticles = res.data.records;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
showTip() {
|
||||
this.$router.push({path: '/weiYan'});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.myAside-container > div:not(:last-child) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.selectSort > div:not(:last-child) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.card-content1 {
|
||||
background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 10s ease infinite;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-content1 :not(:first-child) {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.web-name {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.web-info {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.blog-info-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.blog-info-num {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.collection-btn {
|
||||
position: relative;
|
||||
margin-top: 12px;
|
||||
background: var(--lightGreen);
|
||||
cursor: pointer;
|
||||
width: 65%;
|
||||
height: 35px;
|
||||
border-radius: 1rem;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
color: var(--white);
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.collection-btn::before {
|
||||
background: var(--gradualRed);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
transform: scaleX(0);
|
||||
transform-origin: 0;
|
||||
transition: transform 0.5s ease-out;
|
||||
transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
|
||||
border-radius: 1rem;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.collection-btn:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.card-content2-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
color: var(--lightGreen);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-content2-icon {
|
||||
color: var(--red);
|
||||
margin-right: 5px;
|
||||
animation: scale 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.aside-post-detail {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aside-post-image {
|
||||
width: 40%;
|
||||
min-height: 50px;
|
||||
border-radius: 6px;
|
||||
margin-right: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.error-aside-image {
|
||||
background: var(--themeBackground);
|
||||
color: var(--white);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.aside-post-title {
|
||||
width: 60%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aside-post-date {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 20px;
|
||||
color: var(--greyFont);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.post-sort {
|
||||
border-radius: 1rem;
|
||||
margin-bottom: 15px;
|
||||
line-height: 30px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.post-sort:hover {
|
||||
background: var(--themeBackground);
|
||||
padding: 2px 15px;
|
||||
cursor: pointer;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.sort-name {
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
margin-top: 15px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sort-name:after {
|
||||
top: 74px;
|
||||
width: 22px;
|
||||
left: 26px;
|
||||
height: 2px;
|
||||
background: var(--white);
|
||||
content: "";
|
||||
border-radius: 1px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.admire-box {
|
||||
background: var(--springBg) center center / cover no-repeat;
|
||||
padding: 25px;
|
||||
border-radius: 10px;
|
||||
animation: hideToShow 1s ease-in-out;
|
||||
}
|
||||
|
||||
.admire-btn {
|
||||
padding: 13px 15px;
|
||||
background: var(--maxLightRed);
|
||||
border-radius: 3rem;
|
||||
color: var(--white);
|
||||
width: 100px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
margin: 20px auto 0;
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.admire-btn:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.admire-image {
|
||||
margin: 0 auto 10px;
|
||||
border-radius: 10px;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
background: var(--admireImage) center center / cover no-repeat;
|
||||
}
|
||||
|
||||
.admire-content {
|
||||
font-size: 12px;
|
||||
color: var(--maxGreyFont);
|
||||
line-height: 1.5;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.ais-SearchBox-input {
|
||||
padding: 0 14px;
|
||||
height: 30px;
|
||||
width: calc(100% - 50px);
|
||||
outline: 0;
|
||||
border: 2px solid var(--lightGreen);
|
||||
border-right: 0;
|
||||
border-radius: 40px 0 0 40px;
|
||||
color: var(--maxGreyFont);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.ais-SearchBox-submit {
|
||||
height: 30px;
|
||||
width: 50px;
|
||||
border: 2px solid var(--lightGreen);
|
||||
border-left: 0;
|
||||
border-radius: 0 40px 40px 0;
|
||||
background: var(--white);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hasVideo {
|
||||
padding: 2px 10px 0;
|
||||
background: var(--maxMaxWhiteMask);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
</style>
|
||||
204
src/components/sort.vue
Normal file
204
src/components/sort.vue
Normal file
@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 两句诗 -->
|
||||
<div class="my-animation-slide-top">
|
||||
<twoPoem></twoPoem>
|
||||
</div>
|
||||
|
||||
<div style="background: var(--background);padding-top: 40px;" class="my-animation-slide-bottom">
|
||||
<!-- 标签 -->
|
||||
<div class="sort-warp shadow-box" v-if="!$common.isEmpty(sort) && !$common.isEmpty(sort.labels)">
|
||||
<div v-for="(label, index) in sort.labels" :key="index"
|
||||
:class="{isActive: !$common.isEmpty(labelId) && parseInt(labelId) === label.id}"
|
||||
@click="listArticle(label)">
|
||||
<proTag :info="label.labelName+' '+label.countOfLabel"
|
||||
:color="$constant.before_color_list[Math.floor(Math.random() * 6)]"
|
||||
style="margin: 12px">
|
||||
</proTag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文章 -->
|
||||
<div class="article-wrap">
|
||||
<articleList :articleList="articles"></articleList>
|
||||
<div class="pagination-wrap">
|
||||
<div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">
|
||||
下一页
|
||||
</div>
|
||||
<div v-else style="user-select: none">
|
||||
~~到底啦~~
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 页脚 -->
|
||||
<myFooter></myFooter>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const twoPoem = () => import( "./common/twoPoem");
|
||||
const proTag = () => import( "./common/proTag");
|
||||
const articleList = () => import( "./articleList");
|
||||
const myFooter = () => import( "./common/myFooter");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
twoPoem,
|
||||
proTag,
|
||||
articleList,
|
||||
myFooter
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
sortId: this.$route.query.sortId,
|
||||
labelId: this.$route.query.labelId,
|
||||
sort: null,
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
searchKey: "",
|
||||
sortId: this.$route.query.sortId,
|
||||
labelId: this.$route.query.labelId
|
||||
},
|
||||
articles: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {
|
||||
$route() {
|
||||
this.pagination = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
searchKey: "",
|
||||
sortId: this.$route.query.sortId,
|
||||
labelId: this.$route.query.labelId
|
||||
};
|
||||
this.articles.splice(0, this.articles.length);
|
||||
this.sortId = this.$route.query.sortId;
|
||||
this.labelId = this.$route.query.labelId;
|
||||
this.getSort();
|
||||
this.getArticles();
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getSort();
|
||||
this.getArticles();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
pageArticles() {
|
||||
this.pagination.current = this.pagination.current + 1;
|
||||
this.getArticles();
|
||||
},
|
||||
|
||||
getSort() {
|
||||
let sortInfo = this.$store.state.sortInfo;
|
||||
if (!this.$common.isEmpty(sortInfo)) {
|
||||
let sortArray = sortInfo.filter(f => {
|
||||
return f.id === parseInt(this.sortId);
|
||||
});
|
||||
if (!this.$common.isEmpty(sortArray)) {
|
||||
this.sort = sortArray[0];
|
||||
}
|
||||
}
|
||||
},
|
||||
listArticle(label) {
|
||||
this.labelId = label.id;
|
||||
this.pagination = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
searchKey: "",
|
||||
sortId: this.$route.query.sortId,
|
||||
labelId: label.id
|
||||
};
|
||||
this.articles.splice(0, this.articles.length);
|
||||
this.$nextTick(() => {
|
||||
this.getArticles();
|
||||
});
|
||||
},
|
||||
getArticles() {
|
||||
this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.articles = this.articles.concat(res.data.records);
|
||||
this.pagination.total = res.data.total;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.sort-warp {
|
||||
width: 70%;
|
||||
max-width: 780px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.article-wrap {
|
||||
width: 70%;
|
||||
margin: 40px auto;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.isActive {
|
||||
animation: scale 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 13px 15px;
|
||||
border: 1px solid var(--lightGray);
|
||||
border-radius: 3rem;
|
||||
color: var(--greyFont);
|
||||
width: 100px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination:hover {
|
||||
border: 1px solid var(--themeBackground);
|
||||
color: var(--themeBackground);
|
||||
box-shadow: 0 0 5px var(--themeBackground);
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.sort-warp {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.article-wrap {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
234
src/components/travel.vue
Normal file
234
src/components/travel.vue
Normal file
@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="travel-container">
|
||||
<!-- 封面 -->
|
||||
<div class="travel-header my-animation-slide-top">
|
||||
<!-- 背景图片 -->
|
||||
<video class="index-video" autoplay="autoplay" muted="muted" loop="loop"
|
||||
:src="$store.state.sysConfig['webStaticResourcePrefix'] + 'assets/backgroundVideo.mp4'">
|
||||
</video>
|
||||
<div style="position: absolute;left: 20px;top: 20px">
|
||||
<!-- 标题 -->
|
||||
<div style="margin: 10px">
|
||||
<div>
|
||||
旅拍集
|
||||
</div>
|
||||
<div style="font-size: 36px;font-weight: bold;line-height: 1.5;margin-top: 20px">
|
||||
这里是我的旅拍哦
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: absolute;left: 20px;bottom: 20px;margin: 10px">
|
||||
每一张照片都是一次美好的记忆。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="travel-content my-animation-slide-bottom">
|
||||
<!-- 标签 -->
|
||||
<div class="photo-title-warp" v-if="!$common.isEmpty(photoTitleList)">
|
||||
<div v-for="(item, index) in photoTitleList" :key="index"
|
||||
:class="{isActive: photoPagination.classify === item.classify}"
|
||||
@click="changePhotoTitle(item.classify)">
|
||||
<proTag :info="item.classify+' '+item.count"
|
||||
:color="$constant.before_color_list[Math.floor(Math.random() * 6)]"
|
||||
style="margin: 12px">
|
||||
</proTag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="photo-title">
|
||||
{{photoPagination.classify}}
|
||||
</div>
|
||||
|
||||
<photo :resourcePathList="photoList"></photo>
|
||||
<div class="pagination-wrap">
|
||||
<div @click="pagePhotos()" class="pagination" v-if="photoPagination.total !== photoList.length">
|
||||
下一页
|
||||
</div>
|
||||
<div v-else style="user-select: none">
|
||||
~~到底啦~~
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<div style="background: var(--favoriteBg)">
|
||||
<myFooter></myFooter>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const myFooter = () => import( "./common/myFooter");
|
||||
const photo = () => import( "./common/photo");
|
||||
const proTag = () => import( "./common/proTag");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
photo,
|
||||
proTag,
|
||||
myFooter
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
photoPagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
resourceType: "lovePhoto",
|
||||
classify: ""
|
||||
},
|
||||
photoTitleList: [],
|
||||
photoList: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getPhotoTitles();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
getPhotoTitles() {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/listAdminLovePhoto")
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.photoTitleList = res.data;
|
||||
this.photoPagination = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
resourceType: "lovePhoto",
|
||||
classify: this.photoTitleList[0].classify
|
||||
};
|
||||
this.changePhoto();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
changePhotoTitle(classify) {
|
||||
if (classify !== this.photoPagination.classify) {
|
||||
this.photoPagination = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
resourceType: "lovePhoto",
|
||||
classify: classify
|
||||
};
|
||||
this.photoList = [];
|
||||
this.changePhoto();
|
||||
}
|
||||
},
|
||||
pagePhotos() {
|
||||
this.photoPagination.current = this.photoPagination.current + 1;
|
||||
this.changePhoto();
|
||||
},
|
||||
changePhoto() {
|
||||
this.$http.post(this.$constant.baseURL + "/webInfo/listResourcePath", this.photoPagination)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.photoList = this.photoList.concat(res.data.records);
|
||||
this.photoPagination.total = res.data.total;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.travel-container {
|
||||
padding: 25px;
|
||||
background: var(--favoriteBg);
|
||||
}
|
||||
|
||||
.travel-header {
|
||||
margin: 60px auto 30px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
max-width: 1200px;
|
||||
color: var(--white);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.index-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background: var(--lightGreen);
|
||||
}
|
||||
|
||||
.travel-content {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.photo-title-warp {
|
||||
max-width: 1150px;
|
||||
margin: 30px auto 15px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.isActive {
|
||||
animation: scale 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.photo-title {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 50px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 13px 15px;
|
||||
border: 1px solid var(--lightGray);
|
||||
border-radius: 3rem;
|
||||
color: var(--greyFont);
|
||||
width: 100px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
.photo-title-warp {
|
||||
max-width: 780px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
863
src/components/user.vue
Normal file
863
src/components/user.vue
Normal file
@ -0,0 +1,863 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 登陆和注册 -->
|
||||
<div v-if="$common.isEmpty(currentUser)"
|
||||
class="myCenter in-up-container my-animation-hideToShow">
|
||||
<!-- 背景图片 -->
|
||||
<el-image class="my-el-image"
|
||||
style="position: absolute"
|
||||
v-once
|
||||
lazy
|
||||
:src="$store.state.webInfo.randomCover[Math.floor(Math.random() * $store.state.webInfo.randomCover.length)]"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot"></div>
|
||||
</el-image>
|
||||
<div class="in-up" id="loginAndRegist">
|
||||
<div class="form-container sign-up-container">
|
||||
<div class="myCenter">
|
||||
<h1>注册</h1>
|
||||
<input v-model="username" type="text" maxlength="30" placeholder="用户名">
|
||||
<input v-model="password" type="password" maxlength="30" placeholder="密码">
|
||||
<input v-model="email" type="email" placeholder="邮箱">
|
||||
<input v-model="code" type="text" placeholder="验证码" disabled>
|
||||
<a style="margin: 0" href="#" @click="changeDialog('邮箱验证码')">获取验证码</a>
|
||||
<button @click="regist()">注册</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-container sign-in-container">
|
||||
<div class="myCenter">
|
||||
<h1>登录</h1>
|
||||
<input v-model="account" type="text" placeholder="用户名/邮箱/手机号">
|
||||
<input v-model="password" type="password" placeholder="密码">
|
||||
<a href="#" @click="changeDialog('找回密码')">忘记密码？</a>
|
||||
<button @click="login()">登录</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overlay-container">
|
||||
<div class="overlay">
|
||||
<div class="overlay-panel myCenter overlay-left">
|
||||
<h1>已有帐号？</h1>
|
||||
<p>请登录🚀</p>
|
||||
<button class="ghost" @click="signIn()">登录</button>
|
||||
</div>
|
||||
<div class="overlay-panel myCenter overlay-right">
|
||||
<h1>没有帐号？</h1>
|
||||
<p>立即注册吧😃</p>
|
||||
<button class="ghost" @click="signUp()">注册</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户信息 -->
|
||||
<div v-else class="user-container myCenter my-animation-hideToShow">
|
||||
<!-- 背景图片 -->
|
||||
<el-image class="my-el-image"
|
||||
style="position: absolute"
|
||||
v-once
|
||||
lazy
|
||||
:src="$store.state.webInfo.randomCover[Math.floor(Math.random() * $store.state.webInfo.randomCover.length)]"
|
||||
fit="cover">
|
||||
<div slot="error" class="image-slot"></div>
|
||||
</el-image>
|
||||
<div class="shadow-box-mini user-info" style="display: flex">
|
||||
<div class="user-left">
|
||||
<div>
|
||||
<el-avatar class="user-avatar" @click.native="changeDialog('修改头像')" :size="60"
|
||||
:src="currentUser.avatar"></el-avatar>
|
||||
</div>
|
||||
<div class="myCenter" style="margin-top: 12px">
|
||||
<div class="user-title">
|
||||
<div>用户名：</div>
|
||||
<div>手机号：</div>
|
||||
<div>邮箱：</div>
|
||||
<div>性别：</div>
|
||||
<div>简介：</div>
|
||||
</div>
|
||||
<div class="user-content">
|
||||
<div>
|
||||
<el-input maxlength="30" v-model="currentUser.username"></el-input>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="!$common.isEmpty(currentUser.phoneNumber)">
|
||||
{{ currentUser.phoneNumber }} <span class="changeInfo" @click="changeDialog('修改手机号')">修改（功能未接入）</span>
|
||||
</div>
|
||||
<div v-else><span class="changeInfo" @click="changeDialog('绑定手机号')">绑定手机号（功能未接入）</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="!$common.isEmpty(currentUser.email)">
|
||||
{{ currentUser.email }} <span class="changeInfo" @click="changeDialog('修改邮箱')">修改</span>
|
||||
</div>
|
||||
<div v-else><span class="changeInfo" @click="changeDialog('绑定邮箱')">绑定邮箱</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<el-radio-group v-model="currentUser.gender">
|
||||
<el-radio :label="0" style="margin-right: 10px">薛定谔的猫</el-radio>
|
||||
<el-radio :label="1" style="margin-right: 10px">男</el-radio>
|
||||
<el-radio :label="2">女</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="currentUser.introduction"
|
||||
maxlength="60"
|
||||
type="textarea"
|
||||
show-word-limit></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<proButton :info="'提交'"
|
||||
@click.native="submitUserInfo()"
|
||||
:before="$constant.before_color_2"
|
||||
:after="$constant.after_color_2">
|
||||
</proButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-right">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<el-dialog :title="dialogTitle"
|
||||
:visible.sync="showDialog"
|
||||
width="30%"
|
||||
:before-close="clearDialog"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
center>
|
||||
<div class="myCenter" style="flex-direction: column">
|
||||
<div>
|
||||
<div v-if="dialogTitle === '修改手机号' || dialogTitle === '绑定手机号'">
|
||||
<div style="margin-bottom: 5px">手机号：</div>
|
||||
<el-input v-model="phoneNumber"></el-input>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">验证码：</div>
|
||||
<el-input v-model="code"></el-input>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">密码：</div>
|
||||
<el-input v-model="password"></el-input>
|
||||
</div>
|
||||
<div v-else-if="dialogTitle === '修改邮箱' || dialogTitle === '绑定邮箱'">
|
||||
<div style="margin-bottom: 5px">邮箱：</div>
|
||||
<el-input v-model="email"></el-input>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">验证码：</div>
|
||||
<el-input v-model="code"></el-input>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">密码：</div>
|
||||
<el-input v-model="password"></el-input>
|
||||
</div>
|
||||
<div v-else-if="dialogTitle === '修改头像'">
|
||||
<uploadPicture :prefix="'userAvatar'" @addPicture="addPicture" :maxSize="1"
|
||||
:maxNumber="1"></uploadPicture>
|
||||
</div>
|
||||
<div v-else-if="dialogTitle === '找回密码'">
|
||||
<div class="myCenter" style="margin-bottom: 12px">
|
||||
<el-radio-group v-model="passwordFlag">
|
||||
<el-radio :label="1" style="margin-right: 10px">手机号</el-radio>
|
||||
<el-radio :label="2">邮箱</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div v-if="passwordFlag === 1">
|
||||
<div style="margin-bottom: 5px">手机号：</div>
|
||||
<el-input v-model="phoneNumber"></el-input>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">验证码：</div>
|
||||
<el-input v-model="code"></el-input>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">新密码：</div>
|
||||
<el-input maxlength="30" v-model="password"></el-input>
|
||||
</div>
|
||||
<div v-else-if="passwordFlag === 2">
|
||||
<div style="margin-bottom: 5px">邮箱：</div>
|
||||
<el-input v-model="email"></el-input>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">验证码：</div>
|
||||
<el-input v-model="code"></el-input>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">新密码：</div>
|
||||
<el-input maxlength="30" v-model="password"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="dialogTitle === '邮箱验证码'">
|
||||
<div>
|
||||
<div style="margin-bottom: 5px">邮箱：</div>
|
||||
<el-input v-model="email"></el-input>
|
||||
<div style="margin-top: 10px;margin-bottom: 5px">验证码：</div>
|
||||
<el-input v-model="code"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;margin-top: 30px" v-show="dialogTitle !== '修改头像'">
|
||||
<proButton :info="codeString"
|
||||
v-show="dialogTitle === '修改手机号' || dialogTitle === '绑定手机号' || dialogTitle === '修改邮箱' || dialogTitle === '绑定邮箱' || dialogTitle === '找回密码' || dialogTitle === '邮箱验证码'"
|
||||
@click.native="getCode()"
|
||||
:before="$constant.before_color_1"
|
||||
:after="$constant.after_color_1"
|
||||
style="margin-right: 20px">
|
||||
</proButton>
|
||||
<proButton :info="'提交'"
|
||||
@click.native="submitDialog()"
|
||||
:before="$constant.before_color_2"
|
||||
:after="$constant.after_color_2">
|
||||
</proButton>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const proButton = () => import( "./common/proButton");
|
||||
const uploadPicture = () => import( "./common/uploadPicture");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
proButton,
|
||||
uploadPicture
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentUser: this.$store.state.currentUser,
|
||||
username: "",
|
||||
account: "",
|
||||
password: "",
|
||||
phoneNumber: "",
|
||||
email: "",
|
||||
avatar: "",
|
||||
showDialog: false,
|
||||
code: "",
|
||||
dialogTitle: "",
|
||||
codeString: "验证码",
|
||||
passwordFlag: null,
|
||||
intervalCode: null
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
addPicture(res) {
|
||||
this.avatar = res;
|
||||
this.submitDialog()
|
||||
},
|
||||
signUp() {
|
||||
document.querySelector("#loginAndRegist").classList.add('right-panel-active');
|
||||
},
|
||||
signIn() {
|
||||
document.querySelector("#loginAndRegist").classList.remove('right-panel-active');
|
||||
},
|
||||
login() {
|
||||
if (this.$common.isEmpty(this.account) || this.$common.isEmpty(this.password)) {
|
||||
this.$message({
|
||||
message: "请输入账号或密码！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let user = {
|
||||
account: this.account.trim(),
|
||||
password: this.$common.encrypt(this.password.trim())
|
||||
};
|
||||
|
||||
this.$http.post(this.$constant.baseURL + "/user/login", user, false, false)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.$store.commit("loadCurrentUser", res.data);
|
||||
localStorage.setItem("userToken", res.data.accessToken);
|
||||
this.account = "";
|
||||
this.password = "";
|
||||
this.$router.push({path: '/'});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
regist() {
|
||||
if (this.$common.isEmpty(this.username) || this.$common.isEmpty(this.password)) {
|
||||
this.$message({
|
||||
message: "请输入用户名或密码！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.dialogTitle === "邮箱验证码" && this.$common.isEmpty(this.email)) {
|
||||
this.$message({
|
||||
message: "请输入邮箱！",
|
||||
type: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.$common.isEmpty(this.code)) {
|
||||
this.$message({
|
||||
message: "请输入验证码！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.username.indexOf(" ") !== -1 || this.password.indexOf(" ") !== -1) {
|
||||
this.$message({
|
||||
message: "用户名或密码不能包含空格！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let user = {
|
||||
username: this.username.trim(),
|
||||
code: this.code.trim(),
|
||||
password: this.$common.encrypt(this.password.trim())
|
||||
};
|
||||
|
||||
if (this.dialogTitle === "邮箱验证码") {
|
||||
user.email = this.email;
|
||||
}
|
||||
|
||||
this.$http.post(this.$constant.baseURL + "/user/regist", user)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.$store.commit("loadCurrentUser", res.data);
|
||||
localStorage.setItem("userToken", res.data.accessToken);
|
||||
this.username = "";
|
||||
this.password = "";
|
||||
this.$router.push({path: '/'});
|
||||
let userToken = this.$common.encrypt(localStorage.getItem("userToken"));
|
||||
window.open(this.$constant.imBaseURL + "?userToken=" + userToken);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
submitUserInfo() {
|
||||
if (!this.checkParameters()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let user = {
|
||||
username: this.currentUser.username,
|
||||
gender: this.currentUser.gender
|
||||
};
|
||||
|
||||
if (!this.$common.isEmpty(this.currentUser.introduction)) {
|
||||
user.introduction = this.currentUser.introduction.trim();
|
||||
}
|
||||
|
||||
this.$confirm('确认保存？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.post(this.$constant.baseURL + "/user/updateUserInfo", user)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.$store.commit("loadCurrentUser", res.data);
|
||||
this.currentUser = this.$store.state.currentUser;
|
||||
this.$message({
|
||||
message: "修改成功！",
|
||||
type: "success"
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消保存!'
|
||||
});
|
||||
});
|
||||
},
|
||||
checkParams(params) {
|
||||
if (this.dialogTitle === "修改手机号" || this.dialogTitle === "绑定手机号" || (this.dialogTitle === "找回密码" && this.passwordFlag === 1)) {
|
||||
params.flag = 1;
|
||||
if (this.$common.isEmpty(this.phoneNumber)) {
|
||||
this.$message({
|
||||
message: "请输入手机号！",
|
||||
type: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!(/^1[345789]\d{9}$/.test(this.phoneNumber))) {
|
||||
this.$message({
|
||||
message: "手机号格式有误！",
|
||||
type: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
params.place = this.phoneNumber;
|
||||
return true;
|
||||
} else if (this.dialogTitle === "修改邮箱" || this.dialogTitle === "绑定邮箱" || this.dialogTitle === "邮箱验证码" || (this.dialogTitle === "找回密码" && this.passwordFlag === 2)) {
|
||||
params.flag = 2;
|
||||
if (this.$common.isEmpty(this.email)) {
|
||||
this.$message({
|
||||
message: "请输入邮箱！",
|
||||
type: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!(/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(this.email))) {
|
||||
this.$message({
|
||||
message: "邮箱格式有误！",
|
||||
type: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
params.place = this.email;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
checkParameters() {
|
||||
if (this.$common.isEmpty(this.currentUser.username)) {
|
||||
this.$message({
|
||||
message: "请输入用户名！",
|
||||
type: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.currentUser.username.indexOf(" ") !== -1) {
|
||||
this.$message({
|
||||
message: "用户名不能包含空格！",
|
||||
type: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
changeDialog(value) {
|
||||
if (value === "邮箱验证码") {
|
||||
if (this.$common.isEmpty(this.email)) {
|
||||
this.$message({
|
||||
message: "请输入邮箱！",
|
||||
type: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!(/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(this.email))) {
|
||||
this.$message({
|
||||
message: "邮箱格式有误！",
|
||||
type: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
this.dialogTitle = value;
|
||||
this.showDialog = true;
|
||||
},
|
||||
submitDialog() {
|
||||
if (this.dialogTitle === "修改头像") {
|
||||
if (this.$common.isEmpty(this.avatar)) {
|
||||
this.$message({
|
||||
message: "请上传头像！",
|
||||
type: "error"
|
||||
});
|
||||
} else {
|
||||
let user = {
|
||||
avatar: this.avatar.trim()
|
||||
};
|
||||
|
||||
this.$http.post(this.$constant.baseURL + "/user/updateUserInfo", user)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.$store.commit("loadCurrentUser", res.data);
|
||||
this.currentUser = this.$store.state.currentUser;
|
||||
this.clearDialog();
|
||||
this.$message({
|
||||
message: "修改成功！",
|
||||
type: "success"
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
} else if (this.dialogTitle === "修改手机号" || this.dialogTitle === "绑定手机号" || this.dialogTitle === "修改邮箱" || this.dialogTitle === "绑定邮箱") {
|
||||
this.updateSecretInfo();
|
||||
} else if (this.dialogTitle === "找回密码") {
|
||||
if (this.passwordFlag !== 1 && this.passwordFlag !== 2) {
|
||||
this.$message({
|
||||
message: "请选择找回方式！",
|
||||
type: "error"
|
||||
});
|
||||
} else {
|
||||
this.updateSecretInfo();
|
||||
}
|
||||
} else if (this.dialogTitle === "邮箱验证码") {
|
||||
this.showDialog = false;
|
||||
}
|
||||
},
|
||||
updateSecretInfo() {
|
||||
if (this.$common.isEmpty(this.code)) {
|
||||
this.$message({
|
||||
message: "请输入验证码！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.$common.isEmpty(this.password)) {
|
||||
this.$message({
|
||||
message: "请输入密码！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
code: this.code.trim(),
|
||||
password: this.$common.encrypt(this.password.trim())
|
||||
};
|
||||
if (!this.checkParams(params)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.dialogTitle === "找回密码") {
|
||||
this.$http.post(this.$constant.baseURL + "/user/updateForForgetPassword", params, false, false)
|
||||
.then((res) => {
|
||||
this.clearDialog();
|
||||
this.$message({
|
||||
message: "修改成功，请重新登陆！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.$http.post(this.$constant.baseURL + "/user/updateSecretInfo", params, false, false)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.$store.commit("loadCurrentUser", res.data);
|
||||
this.currentUser = this.$store.state.currentUser;
|
||||
this.clearDialog();
|
||||
this.$message({
|
||||
message: "修改成功！",
|
||||
type: "success"
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
getCode() {
|
||||
if (this.codeString === "验证码") {
|
||||
// 获取验证码
|
||||
let params = {};
|
||||
if (!this.checkParams(params)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let url;
|
||||
if (this.dialogTitle === "找回密码" || this.dialogTitle === "邮箱验证码") {
|
||||
url = "/user/getCodeForForgetPassword";
|
||||
} else {
|
||||
url = "/user/getCodeForBind";
|
||||
}
|
||||
|
||||
this.$http.get(this.$constant.baseURL + url, params)
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
message: "验证码已发送，请注意查收！",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
this.codeString = "30";
|
||||
this.intervalCode = setInterval(() => {
|
||||
if (this.codeString === "0") {
|
||||
clearInterval(this.intervalCode)
|
||||
this.codeString = "验证码";
|
||||
} else {
|
||||
this.codeString = (parseInt(this.codeString) - 1) + "";
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
this.$message({
|
||||
message: "请稍后再试！",
|
||||
type: "warning"
|
||||
});
|
||||
}
|
||||
},
|
||||
clearDialog() {
|
||||
this.password = "";
|
||||
this.phoneNumber = "";
|
||||
this.email = "";
|
||||
this.avatar = "";
|
||||
this.showDialog = false;
|
||||
this.code = "";
|
||||
this.dialogTitle = "";
|
||||
this.passwordFlag = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.in-up-container {
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.in-up {
|
||||
opacity: 0.9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 15px 30px var(--miniMask), 0 10px 10px var(--miniMask);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 750px;
|
||||
max-width: 100%;
|
||||
min-height: 450px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.in-up p {
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
margin: 20px 0 30px 0;
|
||||
}
|
||||
|
||||
.in-up a {
|
||||
color: var(--black);
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.sign-in-container {
|
||||
left: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.sign-up-container {
|
||||
left: 0;
|
||||
width: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.form-container div {
|
||||
background: var(--white);
|
||||
flex-direction: column;
|
||||
padding: 0 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.form-container input {
|
||||
background: var(--maxLightGray);
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
padding: 12px 15px;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.in-up button {
|
||||
border-radius: 2rem;
|
||||
border: none;
|
||||
background: var(--lightRed);
|
||||
color: var(--white);
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding: 12px 45px;
|
||||
letter-spacing: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.in-up button:hover {
|
||||
animation: scale 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
.in-up button.ghost {
|
||||
background: transparent;
|
||||
border: 1px solid var(--white);
|
||||
}
|
||||
|
||||
.sign-up-container button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.overlay-container {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: var(--gradualRed);
|
||||
color: var(--white);
|
||||
position: relative;
|
||||
left: -100%;
|
||||
height: 100%;
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
.overlay-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.overlay-right {
|
||||
right: 0;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.overlay-left {
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
|
||||
.in-up.right-panel-active .sign-in-container {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.in-up.right-panel-active .overlay-container {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.in-up.right-panel-active .sign-up-container {
|
||||
transform: translateX(100%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.in-up.right-panel-active .overlay {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
.in-up.right-panel-active .overlay-left {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.in-up.right-panel-active .overlay-right {
|
||||
transform: translateY(20%);
|
||||
}
|
||||
|
||||
.user-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
width: 80%;
|
||||
z-index: 10;
|
||||
margin-top: 70px;
|
||||
height: calc(100vh - 90px);
|
||||
margin-bottom: 20px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-left {
|
||||
width: 50%;
|
||||
background: var(--maxMaxWhiteMask);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.user-right {
|
||||
width: 50%;
|
||||
background: var(--maxWhiteMask);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.user-title {
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.user-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.user-title div {
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user-content > div {
|
||||
height: 55px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-content >>> .el-input__inner, .user-content >>> .el-textarea__inner {
|
||||
border: none;
|
||||
background: var(--whiteMask);
|
||||
}
|
||||
|
||||
.user-content >>> .el-input__count {
|
||||
background: var(--transparent);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.changeInfo {
|
||||
color: var(--white);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
background: var(--themeBackground);
|
||||
padding: 3px;
|
||||
border-radius: 0.2rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
.user-info {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.user-left {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
203
src/components/weiYan.vue
Normal file
203
src/components/weiYan.vue
Normal file
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 两句诗 -->
|
||||
<div class="my-animation-slide-top">
|
||||
<twoPoem :isHitokoto="false"></twoPoem>
|
||||
</div>
|
||||
|
||||
<div style="background: var(--background);animation: hideToShow 2.5s">
|
||||
<div>
|
||||
<treeHole :treeHoleList="treeHoleList"
|
||||
:avatar="!$common.isEmpty($store.state.currentUser)?$store.state.currentUser.avatar:$store.state.webInfo.avatar"
|
||||
@launch="launch"
|
||||
@deleteTreeHole="deleteTreeHole">
|
||||
</treeHole>
|
||||
<proPage :current="pagination.current"
|
||||
:size="pagination.size"
|
||||
:total="pagination.total"
|
||||
:buttonSize="3"
|
||||
:color="$constant.pageColor"
|
||||
@toPage="toPage">
|
||||
</proPage>
|
||||
</div>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<myFooter :showFooter="showFooter"></myFooter>
|
||||
</div>
|
||||
|
||||
<el-dialog title="微言"
|
||||
:visible.sync="weiYanDialogVisible"
|
||||
width="40%"
|
||||
:before-close="handleClose"
|
||||
:append-to-body="true"
|
||||
destroy-on-close
|
||||
:close-on-click-modal="false"
|
||||
center>
|
||||
<div>
|
||||
<div class="myCenter" style="padding-bottom: 20px">
|
||||
<el-radio-group v-model="isPublic">
|
||||
<el-radio-button :label="true">公开</el-radio-button>
|
||||
<el-radio-button :label="false">私密</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<commentBox :disableGraffiti="true"
|
||||
@submitComment="submitWeiYan">
|
||||
</commentBox>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const twoPoem = () => import( "./common/twoPoem");
|
||||
const myFooter = () => import( "./common/myFooter");
|
||||
const treeHole = () => import( "./common/treeHole");
|
||||
const proPage = () => import( "./common/proPage");
|
||||
const commentBox = () => import( "./comment/commentBox");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
twoPoem,
|
||||
myFooter,
|
||||
treeHole,
|
||||
proPage,
|
||||
commentBox
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
treeHoleList: [],
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0
|
||||
},
|
||||
weiYanDialogVisible: false,
|
||||
isPublic: true,
|
||||
showFooter: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getWeiYan();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
toPage(page) {
|
||||
this.pagination.current = page;
|
||||
window.scrollTo({
|
||||
top: 240,
|
||||
behavior: "smooth"
|
||||
});
|
||||
this.getWeiYan();
|
||||
},
|
||||
launch() {
|
||||
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||
this.$message({
|
||||
message: "请先登录！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.weiYanDialogVisible = true;
|
||||
},
|
||||
handleClose() {
|
||||
this.weiYanDialogVisible = false;
|
||||
},
|
||||
submitWeiYan(content) {
|
||||
let weiYan = {
|
||||
content: content,
|
||||
isPublic: this.isPublic
|
||||
};
|
||||
|
||||
this.$http.post(this.$constant.baseURL + "/weiYan/saveWeiYan", weiYan)
|
||||
.then((res) => {
|
||||
this.getWeiYan();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
this.handleClose();
|
||||
},
|
||||
deleteTreeHole(id) {
|
||||
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||
this.$message({
|
||||
message: "请先登录！",
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.$confirm('确认删除？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$http.get(this.$constant.baseURL + "/weiYan/deleteWeiYan", {id: id})
|
||||
.then((res) => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
this.pagination.current = 1;
|
||||
this.getWeiYan();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '已取消删除!'
|
||||
});
|
||||
});
|
||||
},
|
||||
getWeiYan() {
|
||||
this.$http.post(this.$constant.baseURL + "/weiYan/listWeiYan", this.pagination)
|
||||
.then((res) => {
|
||||
this.showFooter = false;
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
res.data.records.forEach(c => {
|
||||
c.content = c.content.replace(/\n{2,}/g, '<div style="height: 12px"></div>');
|
||||
c.content = c.content.replace(/\n/g, '<br/>');
|
||||
c.content = this.$common.faceReg(c.content);
|
||||
c.content = this.$common.pictureReg(c.content);
|
||||
});
|
||||
this.treeHoleList = res.data.records;
|
||||
this.pagination.total = res.data.total;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.showFooter = true;
|
||||
this.$common.imgShow(".tree-hole-box .pictureReg");
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
38
src/main.js
Normal file
38
src/main.js
Normal file
@ -0,0 +1,38 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import ElementUI from 'element-ui'
|
||||
import http from './utils/request'
|
||||
import common from './utils/common'
|
||||
import constant from './utils/constant'
|
||||
import mavonEditor from 'mavon-editor'
|
||||
//引入js
|
||||
import './utils/live2d'
|
||||
import './utils/title'
|
||||
//引入css
|
||||
import './assets/css/animation.css'
|
||||
import './assets/css/index.css'
|
||||
import './assets/css/tocbot.css'
|
||||
import './assets/css/color.css'
|
||||
import './assets/css/markdown-highlight.css'
|
||||
import './assets/css/font-awesome.min.css'
|
||||
import 'mavon-editor/dist/css/index.css'
|
||||
|
||||
import {vueBaberrage} from 'vue-baberrage'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
Vue.use(vueBaberrage)
|
||||
Vue.use(mavonEditor)
|
||||
|
||||
Vue.prototype.$http = http
|
||||
Vue.prototype.$common = common
|
||||
Vue.prototype.$constant = constant
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
154
src/router/index.js
Normal file
154
src/router/index.js
Normal file
@ -0,0 +1,154 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
const originalPush = VueRouter.prototype.push;
|
||||
VueRouter.prototype.push = function push(location) {
|
||||
return originalPush.call(this, location).catch(err => err);
|
||||
}
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('../components/home'),
|
||||
children: [{
|
||||
path: "/",
|
||||
name: "index",
|
||||
component: () => import('../components/index')
|
||||
}, {
|
||||
path: "/sort",
|
||||
name: "sort",
|
||||
component: () => import('../components/sort')
|
||||
}, {
|
||||
path: "/article/:id",
|
||||
name: "article",
|
||||
component: () => import('../components/article')
|
||||
}, {
|
||||
path: "/weiYan",
|
||||
name: "weiYan",
|
||||
component: () => import('../components/weiYan')
|
||||
}, {
|
||||
path: "/jotting",
|
||||
name: "jotting",
|
||||
component: () => import('../components/jotting')
|
||||
}, {
|
||||
path: "/love",
|
||||
name: "love",
|
||||
component: () => import('../components/love')
|
||||
}, {
|
||||
path: "/favorite",
|
||||
name: "favorite",
|
||||
component: () => import('../components/favorite')
|
||||
}, {
|
||||
path: "/travel",
|
||||
name: "travel",
|
||||
component: () => import('../components/travel')
|
||||
}, {
|
||||
path: "/message",
|
||||
name: "message",
|
||||
component: () => import('../components/message')
|
||||
}, {
|
||||
path: "/about",
|
||||
name: "about",
|
||||
component: () => import('../components/about')
|
||||
}, {
|
||||
path: "/user",
|
||||
name: "user",
|
||||
component: () => import('../components/user')
|
||||
}, {
|
||||
path: "/letter",
|
||||
name: "letter",
|
||||
component: () => import('../components/letter')
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
redirect: '/welcome',
|
||||
meta: {requiresAuth: true},
|
||||
component: () => import('../components/admin/admin'),
|
||||
children: [{
|
||||
path: '/welcome',
|
||||
name: 'welcome',
|
||||
component: () => import('../components/admin/welcome')
|
||||
}, {
|
||||
path: '/main',
|
||||
name: 'main',
|
||||
component: () => import('../components/admin/main')
|
||||
}, {
|
||||
path: '/webEdit',
|
||||
name: 'webEdit',
|
||||
component: () => import('../components/admin/webEdit')
|
||||
}, {
|
||||
path: '/userList',
|
||||
name: 'userList',
|
||||
component: () => import('../components/admin/userList')
|
||||
}, {
|
||||
path: '/postList',
|
||||
name: 'postList',
|
||||
component: () => import('../components/admin/postList')
|
||||
}, {
|
||||
path: '/postEdit',
|
||||
name: 'postEdit',
|
||||
component: () => import('../components/admin/postEdit')
|
||||
}, {
|
||||
path: '/sortList',
|
||||
name: 'sortList',
|
||||
component: () => import('../components/admin/sortList')
|
||||
}, {
|
||||
path: '/configList',
|
||||
name: 'configList',
|
||||
component: () => import('../components/admin/configList')
|
||||
}, {
|
||||
path: '/commentList',
|
||||
name: 'commentList',
|
||||
component: () => import('../components/admin/commentList')
|
||||
}, {
|
||||
path: '/treeHoleList',
|
||||
name: 'treeHoleList',
|
||||
component: () => import('../components/admin/treeHoleList')
|
||||
}, {
|
||||
path: '/resourceList',
|
||||
name: 'resourceList',
|
||||
component: () => import('../components/admin/resourceList')
|
||||
}, {
|
||||
path: '/loveList',
|
||||
name: 'loveList',
|
||||
component: () => import('../components/admin/loveList')
|
||||
}, {
|
||||
path: '/resourcePathList',
|
||||
name: 'resourcePathList',
|
||||
component: () => import('../components/admin/resourcePathList')
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/verify',
|
||||
name: 'verify',
|
||||
component: () => import('../components/admin/verify')
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: "history",
|
||||
routes: routes,
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
return {x: 0, y: 0}
|
||||
}
|
||||
})
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.matched.some(record => record.meta.requiresAuth)) {
|
||||
if (!Boolean(localStorage.getItem("adminToken"))) {
|
||||
next({
|
||||
path: '/verify',
|
||||
query: {redirect: to.fullPath}
|
||||
});
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
75
src/store/index.js
Normal file
75
src/store/index.js
Normal file
@ -0,0 +1,75 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
toolbar: JSON.parse(localStorage.getItem("toolbar") || '{"visible": false, "enter": true}'),
|
||||
sortInfo: JSON.parse(localStorage.getItem("sortInfo") || '[]'),
|
||||
currentUser: JSON.parse(localStorage.getItem("currentUser") || '{}'),
|
||||
currentAdmin: JSON.parse(localStorage.getItem("currentAdmin") || '{}'),
|
||||
sysConfig: JSON.parse(localStorage.getItem("sysConfig") || '{}'),
|
||||
webInfo: JSON.parse(localStorage.getItem("webInfo") || '{"webName": "", "webTitle": [], "notices": [], "randomCover": [], "footer": "", "backgroundImage": "", "avatar": ""}')
|
||||
},
|
||||
getters: {
|
||||
articleTotal: state => {
|
||||
if (state.sortInfo !== null && state.sortInfo.length !== 0) {
|
||||
if (state.sortInfo.length === 1) {
|
||||
return state.sortInfo[0].countOfSort;
|
||||
} else {
|
||||
return state.sortInfo.reduce((prev, curr) => {
|
||||
if (typeof prev === "number") {
|
||||
return prev + curr.countOfSort;
|
||||
} else {
|
||||
return prev.countOfSort + curr.countOfSort;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
navigationBar: state => {
|
||||
if (state.sortInfo !== null && state.sortInfo.length !== 0) {
|
||||
return state.sortInfo.filter(f => f.sortType === 0);
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
changeToolbarStatus(state, toolbarState) {
|
||||
state.toolbar = toolbarState;
|
||||
localStorage.setItem("toolbar", JSON.stringify(toolbarState));
|
||||
},
|
||||
loadSortInfo(state, sortInfo) {
|
||||
if (sortInfo !== null && sortInfo.length !== 0) {
|
||||
state.sortInfo = sortInfo.sort((s1, s2) => s1.priority - s2.priority);
|
||||
localStorage.setItem("sortInfo", JSON.stringify(sortInfo.sort((s1, s2) => s1.priority - s2.priority)));
|
||||
}
|
||||
},
|
||||
loadCurrentUser(state, user) {
|
||||
state.currentUser = user;
|
||||
localStorage.setItem("currentUser", JSON.stringify(user));
|
||||
},
|
||||
loadSysConfig(state, sysConfig) {
|
||||
state.sysConfig = sysConfig;
|
||||
localStorage.setItem("sysConfig", JSON.stringify(sysConfig));
|
||||
},
|
||||
loadCurrentAdmin(state, user) {
|
||||
state.currentAdmin = user;
|
||||
localStorage.setItem("currentAdmin", JSON.stringify(user));
|
||||
},
|
||||
loadWebInfo(state, webInfo) {
|
||||
webInfo.webTitle = webInfo.webTitle.split('');
|
||||
webInfo.notices = JSON.parse(webInfo.notices);
|
||||
webInfo.randomCover = JSON.parse(webInfo.randomCover);
|
||||
state.webInfo = webInfo;
|
||||
localStorage.setItem("webInfo", JSON.stringify(webInfo));
|
||||
}
|
||||
},
|
||||
actions: {},
|
||||
modules: {},
|
||||
plugins: []
|
||||
})
|
||||
77
src/utils/ajaxUpload.js
Normal file
77
src/utils/ajaxUpload.js
Normal file
@ -0,0 +1,77 @@
|
||||
function getError(action, option, xhr) {
|
||||
let msg;
|
||||
if (xhr.response) {
|
||||
msg = `${xhr.response.error || xhr.response}`;
|
||||
} else if (xhr.responseText) {
|
||||
msg = `${xhr.responseText}`;
|
||||
} else {
|
||||
msg = `fail to ${action} ${xhr.status}`;
|
||||
}
|
||||
|
||||
return new Error(msg);
|
||||
}
|
||||
|
||||
function getBody(xhr) {
|
||||
const text = xhr.responseText || xhr.response;
|
||||
if (!text) {
|
||||
return text;
|
||||
}
|
||||
|
||||
try {
|
||||
return JSON.parse(text);
|
||||
} catch (e) {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
|
||||
export default function upload(option) {
|
||||
const xhr = new XMLHttpRequest();
|
||||
const action = option.action;
|
||||
|
||||
if (xhr.upload) {
|
||||
xhr.upload.onprogress = function progress(e) {
|
||||
if (e.total > 0) {
|
||||
e.percent = e.loaded / e.total * 100;
|
||||
}
|
||||
option.onProgress(e);
|
||||
};
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
|
||||
if (option.data) {
|
||||
Object.keys(option.data).forEach(key => {
|
||||
formData.append(key, option.data[key]);
|
||||
});
|
||||
}
|
||||
|
||||
formData.append(option.filename, option.file, option.file.name);
|
||||
|
||||
xhr.onerror = function error(e) {
|
||||
option.onError(e);
|
||||
};
|
||||
|
||||
xhr.onload = function onload() {
|
||||
if (xhr.status < 200 || xhr.status >= 300) {
|
||||
return option.onError(getError(action, option, xhr));
|
||||
}
|
||||
|
||||
option.onSuccess(getBody(xhr));
|
||||
};
|
||||
|
||||
xhr.open('post', action, true);
|
||||
|
||||
if (option.withCredentials && 'withCredentials' in xhr) {
|
||||
xhr.withCredentials = true;
|
||||
}
|
||||
|
||||
const headers = option.headers || {};
|
||||
|
||||
for (let item in headers) {
|
||||
if (headers.hasOwnProperty(item) && headers[item] !== null) {
|
||||
xhr.setRequestHeader(item, headers[item]);
|
||||
}
|
||||
}
|
||||
xhr.send(formData);
|
||||
return xhr;
|
||||
}
|
||||
98
src/utils/bubble.js
Normal file
98
src/utils/bubble.js
Normal file
@ -0,0 +1,98 @@
|
||||
if (document.querySelector(".author-content.author-content-item.single")) {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.id = "header_canvas";
|
||||
canvas.style.position = "absolute";
|
||||
canvas.style.bottom = "0";
|
||||
canvas.width = 844;
|
||||
canvas.height = 346;
|
||||
document.querySelector(".author-content.author-content-item.single").appendChild(canvas);
|
||||
const parent = document.querySelector(".author-content.author-content-item.single").parentNode;
|
||||
parent.className = "thumbnail_canvas";
|
||||
(function () {
|
||||
var canvas,
|
||||
ctx,
|
||||
width,
|
||||
height,
|
||||
bubbles,
|
||||
animateHeader = true;
|
||||
initHeader();
|
||||
|
||||
function initHeader() {
|
||||
canvas = document.getElementById("header_canvas");
|
||||
window_resize();
|
||||
if (canvas) {
|
||||
ctx = canvas.getContext("2d");
|
||||
//建立泡泡
|
||||
bubbles = [];
|
||||
var num = width * 0.04; //气泡数量
|
||||
for (var i = 0; i < num; i++) {
|
||||
var c = new Bubble();
|
||||
bubbles.push(c);
|
||||
}
|
||||
animate();
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
if (animateHeader) {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
for (var i in bubbles) {
|
||||
bubbles[i].draw();
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
function window_resize() {
|
||||
//canvas铺满窗口
|
||||
//width = window.innerWidth;
|
||||
//height = window.innerHeight;
|
||||
|
||||
//如果需要铺满内容可以换下面这个
|
||||
const panel = document.querySelector(".thumbnail_canvas");
|
||||
if (panel) {
|
||||
width = panel.offsetWidth;
|
||||
height = panel.offsetHeight;
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
}
|
||||
}
|
||||
|
||||
window.onresize = function () {
|
||||
window_resize();
|
||||
};
|
||||
|
||||
function Bubble() {
|
||||
var _this = this;
|
||||
(function () {
|
||||
_this.pos = {};
|
||||
init();
|
||||
})();
|
||||
|
||||
function init() {
|
||||
_this.pos.x = Math.random() * width;
|
||||
_this.pos.y = height + Math.random() * 100;
|
||||
_this.alpha = 0.1 + Math.random() * 0.5; //气泡透明度
|
||||
_this.alpha_change = 0.0002 + Math.random() * 0.0005; //气泡透明度变化速度
|
||||
_this.scale = 0.2 + Math.random() * 0.8; //气泡大小
|
||||
_this.scale_change = Math.random() * 0.002; //气泡大小变化速度
|
||||
_this.speed = 0.1 + Math.random() * 0.4; //气泡上升速度
|
||||
}
|
||||
|
||||
//气泡
|
||||
this.draw = function () {
|
||||
if (_this.alpha <= 0) {
|
||||
init();
|
||||
}
|
||||
_this.pos.y -= _this.speed;
|
||||
_this.alpha -= _this.alpha_change;
|
||||
_this.scale += _this.scale_change;
|
||||
ctx.beginPath();
|
||||
ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 10, 0, 2 * Math.PI, false);
|
||||
ctx.fillStyle = "rgba(255,255,255," + _this.alpha + ")";
|
||||
ctx.fill();
|
||||
};
|
||||
}
|
||||
})();
|
||||
}
|
||||
373
src/utils/common.js
Normal file
373
src/utils/common.js
Normal file
@ -0,0 +1,373 @@
|
||||
import constant from "./constant";
|
||||
import CryptoJS from 'crypto-js';
|
||||
import store from '../store';
|
||||
|
||||
export default {
|
||||
pushNotification(notices, isNotification) {
|
||||
if (isNotification) {
|
||||
if (this.isEmpty(notices)) {
|
||||
return [];
|
||||
} else {
|
||||
return notices.filter(f => "推送标题：" !== f.substr(0, 5) &&
|
||||
"推送封面：" !== f.substr(0, 5) &&
|
||||
"推送链接：" !== f.substr(0, 5));
|
||||
}
|
||||
} else {
|
||||
let push = {};
|
||||
notices.forEach(notice => {
|
||||
if ("推送标题：" === notice.substr(0, 5)) {
|
||||
push['标题'] = notice.substr(5);
|
||||
} else if ("推送封面：" === notice.substr(0, 5)) {
|
||||
push['封面'] = notice.substr(5);
|
||||
} else if ("推送链接：" === notice.substr(0, 5)) {
|
||||
push['链接'] = notice.substr(5);
|
||||
}
|
||||
});
|
||||
return push;
|
||||
}
|
||||
},
|
||||
|
||||
mobile() {
|
||||
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
|
||||
return flag && flag.length && flag.length > 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断是否为空
|
||||
*/
|
||||
isEmpty(value) {
|
||||
if (typeof value === "undefined" || value === null || (typeof value === "string" && value.trim() === "") || (Array.prototype.isPrototypeOf(value) && value.length === 0) || (Object.prototype.isPrototypeOf(value) && Object.keys(value).length === 0)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 加密
|
||||
*/
|
||||
encrypt(plaintText) {
|
||||
let options = {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
};
|
||||
let key = CryptoJS.enc.Utf8.parse(constant.cryptojs_key);
|
||||
let encryptedData = CryptoJS.AES.encrypt(plaintText, key, options);
|
||||
return encryptedData.toString().replace(/\//g, "_").replace(/\+/g, "-");
|
||||
},
|
||||
|
||||
/**
|
||||
* 解密
|
||||
*/
|
||||
decrypt(encryptedBase64Str) {
|
||||
let val = encryptedBase64Str.replace(/\-/g, '+').replace(/_/g, '/');
|
||||
let options = {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
};
|
||||
let key = CryptoJS.enc.Utf8.parse(constant.cryptojs_key);
|
||||
let decryptedData = CryptoJS.AES.decrypt(val, key, options);
|
||||
return CryptoJS.enc.Utf8.stringify(decryptedData);
|
||||
},
|
||||
|
||||
/**
|
||||
* 表情包转换
|
||||
*/
|
||||
faceReg(content) {
|
||||
content = content.replace(/\[[^\[^\]]+\]/g, (word) => {
|
||||
let index = constant.emojiList.indexOf(word.replace("[", "").replace("]", ""));
|
||||
if (index > -1) {
|
||||
let url = store.state.sysConfig['webStaticResourcePrefix'] + "emoji/q" + (index + 1) + ".gif";
|
||||
return '<img loading="lazy" style="vertical-align: middle;width: 32px;height: 32px" src="' + url + '" title="' + word + '"/>';
|
||||
} else {
|
||||
return word;
|
||||
}
|
||||
});
|
||||
return content;
|
||||
},
|
||||
|
||||
/**
|
||||
* 图片转换
|
||||
*/
|
||||
pictureReg(content) {
|
||||
content = content.replace(/\[[^\[^\]]+\]/g, (word) => {
|
||||
let index = word.indexOf(",");
|
||||
if (index > -1) {
|
||||
let arr = word.replace("[", "").replace("]", "").split(",");
|
||||
return '<img loading="lazy" class="pictureReg" style="border-radius: 5px;width: 100%;max-width: 250px;display: block" src="' + arr[1] + '" title="' + arr[0] + '"/>';
|
||||
} else {
|
||||
return word;
|
||||
}
|
||||
});
|
||||
return content;
|
||||
},
|
||||
|
||||
imgShow(select) {
|
||||
$(select).click(function () {
|
||||
let src = $(this).attr("src");
|
||||
$("#bigImg").attr("src", src);
|
||||
|
||||
/** 获取当前点击图片的真实大小，并显示弹出层及大图 */
|
||||
$("<img/>").attr("src", src).load(function () {
|
||||
let windowW = $(window).width();//获取当前窗口宽度
|
||||
let windowH = $(window).height();//获取当前窗口高度
|
||||
let realWidth = this.width;//获取图片真实宽度
|
||||
let realHeight = this.height;//获取图片真实高度
|
||||
let imgWidth, imgHeight;
|
||||
let scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
|
||||
|
||||
if (realHeight > windowH * scale) {//判断图片高度
|
||||
imgHeight = windowH * scale;//如大于窗口高度，图片高度进行缩放
|
||||
imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度
|
||||
if (imgWidth > windowW * scale) {//如宽度仍大于窗口宽度
|
||||
imgWidth = windowW * scale;//再对宽度进行缩放
|
||||
}
|
||||
} else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度
|
||||
imgWidth = windowW * scale;//如大于窗口宽度，图片宽度进行缩放
|
||||
imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度
|
||||
} else {//如果图片真实高度和宽度都符合要求，高宽不变
|
||||
imgWidth = realWidth;
|
||||
imgHeight = realHeight;
|
||||
}
|
||||
$("#bigImg").css("width", imgWidth);//以最终的宽度对图片缩放
|
||||
$("#bigImg").css("border-radius", "6px");
|
||||
|
||||
let w = (windowW - imgWidth) / 2;//计算图片与窗口左边距
|
||||
let h = (windowH - imgHeight) / 2;//计算图片与窗口上边距
|
||||
$("#innerImg").css({"top": h, "left": w});//设置top和left属性
|
||||
$("#outerImg").fadeIn("fast");//淡入显示
|
||||
});
|
||||
|
||||
$("#outerImg").click(function () {//再次点击淡出消失弹出层
|
||||
$(this).fadeOut("fast");
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 字符串转换为时间戳
|
||||
*/
|
||||
getDateTimeStamp(dateStr) {
|
||||
return Date.parse(dateStr.replace(/-/gi, "/"));
|
||||
},
|
||||
|
||||
getDateDiff(dateStr) {
|
||||
let publishTime = isNaN(Date.parse(dateStr.replace(/-/gi, "/")) / 1000) ? Date.parse(dateStr) / 1000 : Date.parse(dateStr.replace(/-/gi, "/")) / 1000;
|
||||
let d_seconds,
|
||||
d_minutes,
|
||||
d_hours,
|
||||
d_days,
|
||||
timeNow = Math.floor(new Date().getTime() / 1000),
|
||||
d,
|
||||
date = new Date(publishTime * 1000),
|
||||
Y = date.getFullYear(),
|
||||
M = date.getMonth() + 1,
|
||||
D = date.getDate(),
|
||||
H = date.getHours(),
|
||||
m = date.getMinutes(),
|
||||
s = date.getSeconds();
|
||||
//小于10的在前面补0
|
||||
if (M < 10) {
|
||||
M = '0' + M;
|
||||
}
|
||||
if (D < 10) {
|
||||
D = '0' + D;
|
||||
}
|
||||
if (H < 10) {
|
||||
H = '0' + H;
|
||||
}
|
||||
if (m < 10) {
|
||||
m = '0' + m;
|
||||
}
|
||||
if (s < 10) {
|
||||
s = '0' + s;
|
||||
}
|
||||
d = timeNow - publishTime;
|
||||
d_days = Math.floor(d / 86400);
|
||||
d_hours = Math.floor(d / 3600);
|
||||
d_minutes = Math.floor(d / 60);
|
||||
d_seconds = Math.floor(d);
|
||||
if (d_days > 0 && d_days < 3) {
|
||||
return d_days + '天前';
|
||||
} else if (d_days <= 0 && d_hours > 0) {
|
||||
return d_hours + '小时前';
|
||||
} else if (d_hours <= 0 && d_minutes > 0) {
|
||||
return d_minutes + '分钟前';
|
||||
} else if (d_seconds < 60) {
|
||||
if (d_seconds <= 0) {
|
||||
return '刚刚发表';
|
||||
} else {
|
||||
return d_seconds + '秒前';
|
||||
}
|
||||
} else if (d_days >= 3) {
|
||||
return Y + '-' + M + '-' + D + ' ' + H + ':' + m;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 保存资源
|
||||
*/
|
||||
saveResource(that, type, path, size, mimeType, originalName, storeType, isAdmin = false) {
|
||||
let resource = {
|
||||
type: type,
|
||||
path: path,
|
||||
size: size,
|
||||
mimeType: mimeType,
|
||||
storeType: storeType,
|
||||
originalName: originalName
|
||||
};
|
||||
|
||||
that.$http.post(that.$constant.baseURL + "/resource/saveResource", resource, isAdmin)
|
||||
.catch((error) => {
|
||||
that.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 计算两个时间相差的年、月、日、时、分、秒
|
||||
*
|
||||
* https://juejin.cn/post/7153816601156911118
|
||||
*/
|
||||
timeDiff(oldTime, newTime) {
|
||||
oldTime = oldTime.replace(new RegExp("-", "gm"), "/");
|
||||
if (newTime) {
|
||||
newTime = newTime.replace(new RegExp("-", "gm"), "/");
|
||||
} else {
|
||||
newTime = new Date();
|
||||
}
|
||||
|
||||
// 计算比较日期
|
||||
const getMaxMinDate = (time, twoTime, type) => {
|
||||
let minTime = new Date(time).getTime() - new Date(twoTime).getTime() > 0 ? twoTime : time;
|
||||
let maxTime = new Date(time).getTime() - new Date(twoTime).getTime() > 0 ? time : twoTime;
|
||||
let maxDateDay = new Date(new Date(maxTime).getFullYear(), new Date(maxTime).getMonth() + 1, 0).getDate();
|
||||
let maxMinDate = new Date(minTime).getDate() > maxDateDay ? maxDateDay : new Date(minTime).getDate();
|
||||
let maxMinTong;
|
||||
if (type === 'month') {
|
||||
maxMinTong = new Date(maxTime).getFullYear() + '/' + (new Date(minTime).getMonth() + 1) + '/' + maxMinDate + ' ' + new Date(minTime).toLocaleTimeString('chinese', {hour12: false});
|
||||
} else {
|
||||
maxMinTong = new Date(maxTime).getFullYear() + '/' + (new Date(maxTime).getMonth() + 1) + '/' + maxMinDate + ' ' + new Date(minTime).toLocaleTimeString('chinese', {hour12: false});
|
||||
}
|
||||
return {
|
||||
minTime,
|
||||
maxTime,
|
||||
maxMinTong
|
||||
}
|
||||
}
|
||||
|
||||
// 相差年份
|
||||
const getYear = (time, twoTime) => {
|
||||
let oneYear = new Date(time).getFullYear();
|
||||
let twoYear = new Date(twoTime).getFullYear();
|
||||
const {minTime, maxTime, maxMinTong} = getMaxMinDate(time, twoTime, 'month');
|
||||
let chaYear = Math.abs(oneYear - twoYear);
|
||||
if (new Date(maxMinTong).getTime() > new Date(maxTime).getTime()) {
|
||||
chaYear--;
|
||||
}
|
||||
return chaYear;
|
||||
}
|
||||
|
||||
// 相差月份
|
||||
const getMonth = (time, twoTime, value) => {
|
||||
let oneMonth = new Date(time).getFullYear() * 12 + (new Date(time).getMonth() + 1);
|
||||
let twoMonth = new Date(twoTime).getFullYear() * 12 + (new Date(twoTime).getMonth() + 1);
|
||||
const {minTime, maxTime, maxMinTong} = getMaxMinDate(time, twoTime, 'day');
|
||||
let chaMonth = Math.abs(oneMonth - twoMonth);
|
||||
if (new Date(maxMinTong).getTime() > new Date(maxTime).getTime()) {
|
||||
chaMonth--;
|
||||
}
|
||||
if (value) {
|
||||
return chaMonth - value;
|
||||
} else {
|
||||
return chaMonth;
|
||||
}
|
||||
}
|
||||
|
||||
// 相差天数
|
||||
const getDay = (time, twoTime, value) => {
|
||||
let chaTime = Math.abs(new Date(time).getTime() - new Date(twoTime).getTime());
|
||||
if (value) {
|
||||
return parseInt(chaTime / 86400000) - value;
|
||||
} else {
|
||||
return parseInt(chaTime / 86400000);
|
||||
}
|
||||
}
|
||||
|
||||
// 相差小时
|
||||
const getHour = (time, twoTime, value) => {
|
||||
let chaTime = Math.abs(new Date(time).getTime() - new Date(twoTime).getTime());
|
||||
if (value) {
|
||||
return parseInt(chaTime / 3600000) - value;
|
||||
} else {
|
||||
return parseInt(chaTime / 3600000);
|
||||
}
|
||||
}
|
||||
|
||||
// 相差分钟
|
||||
const getMinute = (time, twoTime, value) => {
|
||||
let chaTime = Math.abs(new Date(time).getTime() - new Date(twoTime).getTime());
|
||||
if (value) {
|
||||
return parseInt(chaTime / 60000) - value;
|
||||
} else {
|
||||
return parseInt(chaTime / 60000);
|
||||
}
|
||||
}
|
||||
|
||||
// 相差秒
|
||||
const getSecond = (time, twoTime, value) => {
|
||||
let chaTime = Math.abs(new Date(time).getTime() - new Date(twoTime).getTime());
|
||||
if (value) {
|
||||
return parseInt(chaTime / 1000) - value;
|
||||
} else {
|
||||
return parseInt(chaTime / 1000);
|
||||
}
|
||||
}
|
||||
|
||||
// 相差年月日时分秒
|
||||
const getDiffYMDHMS = (time, twoTime) => {
|
||||
const {minTime, maxTime, maxMinTong} = getMaxMinDate(time, twoTime, 'day');
|
||||
let diffDay1 = getDay(minTime, maxMinTong);
|
||||
if (new Date(maxMinTong).getTime() > new Date(maxTime).getTime()) {
|
||||
let prevMonth = new Date(maxMinTong).getMonth() - 1;
|
||||
let lastTime = new Date(maxMinTong).setMonth(prevMonth);
|
||||
diffDay1 = diffDay1 - getDay((new Date(lastTime).getFullYear() + '/' + (new Date(lastTime).getMonth() + 1) + '/' + new Date(lastTime).getDate()), maxMinTong);
|
||||
}
|
||||
let diffYear = getYear(time, twoTime);
|
||||
let diffMonth = getMonth(time, twoTime, diffYear * 12);
|
||||
let diffDay = getDay(time, twoTime, diffDay1);
|
||||
let diffHour = getHour(time, twoTime, getDay(time, twoTime) * 24);
|
||||
let diffMinute = getMinute(time, twoTime, (getDay(time, twoTime) * 24 * 60 + diffHour * 60));
|
||||
let diffSecond = getSecond(time, twoTime, (getDay(time, twoTime) * 24 * 60 * 60 + diffHour * 60 * 60 + diffMinute * 60));
|
||||
return {
|
||||
diffYear,
|
||||
diffMonth,
|
||||
diffDay,
|
||||
diffHour,
|
||||
diffMinute,
|
||||
diffSecond
|
||||
}
|
||||
}
|
||||
|
||||
return getDiffYMDHMS(oldTime, newTime);
|
||||
},
|
||||
|
||||
countdown(time) {
|
||||
time = new Date(time.replace(new RegExp("-", "gm"), "/"));
|
||||
let nowTime = new Date();
|
||||
//两个时间点的时间差(秒)
|
||||
let seconds = parseInt((time.getTime() - nowTime.getTime()) / 1000);
|
||||
let d = parseInt(seconds / 3600 / 24);
|
||||
let h = parseInt(seconds / 3600 % 24);
|
||||
let m = parseInt(seconds / 60 % 60);
|
||||
let s = parseInt(seconds % 60);
|
||||
return {
|
||||
d,
|
||||
h,
|
||||
m,
|
||||
s
|
||||
}
|
||||
}
|
||||
}
|
||||
47
src/utils/constant.js
Normal file
47
src/utils/constant.js
Normal file
@ -0,0 +1,47 @@
|
||||
export default {
|
||||
// 测试环境
|
||||
baseURL: "http://localhost:8081",
|
||||
imBaseURL: "http://localhost:8082/im",
|
||||
webURL: "http://localhost:8083",
|
||||
|
||||
// 生产环境
|
||||
// webURL: location.protocol + "//" + location.hostname + (location.port ? ':' + location.port : ''),
|
||||
// baseURL: location.protocol + "//" + location.hostname + (location.port ? ':' + location.port : '') + "/api",
|
||||
// imBaseURL: location.protocol + "//" + location.hostname + (location.port ? ':' + location.port : '') + "/im",
|
||||
|
||||
host: location.hostname + (location.port ? ':' + location.port : ''),
|
||||
|
||||
live2d_path: "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/",
|
||||
cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/",
|
||||
waifuPath: "/webInfo/getWaifuJson",
|
||||
hitokoto: "https://v1.hitokoto.cn",
|
||||
shehui: "https://api.oick.cn/yulu/api.php",
|
||||
tocbot: "https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.min.js",
|
||||
jinrishici: "https://v1.jinrishici.com/all.json",
|
||||
//前后端定义的密钥，AES使用16位
|
||||
cryptojs_key: "sarasarasarasara",
|
||||
|
||||
before_color_list: ["black", "rgb(131, 123, 199)", "#ee7752", "#e73c7e", "#23a6d5", "#23d5ab"],
|
||||
|
||||
tree_hole_color: ["rgb(180, 224, 255)", "rgb(180, 203, 255)", "rgb(246, 223, 255)", "rgb(255, 214, 198)", "rgb(255, 205, 143)", "rgb(238, 255, 143)", "rgb(220, 255, 165)", "rgb(164, 234, 192)", "rgb(202, 241, 233)", "rgb(230, 230, 250)"],
|
||||
|
||||
before_color_1: "black",
|
||||
after_color_1: "linear-gradient(45deg, #f43f3b, #ec008c)",
|
||||
|
||||
before_color_2: "rgb(131, 123, 199)",
|
||||
after_color_2: "linear-gradient(45deg, #f43f3b, #ec008c)",
|
||||
|
||||
sortColor: ["linear-gradient(to right, #358bff, #15c6ff)",
|
||||
"linear-gradient(to right, #18e7ae, #1eebeb)",
|
||||
"linear-gradient(to right, #ff6655, #ffbf37)",
|
||||
"linear-gradient(120deg, rgba(255, 39, 232, 1) 0%, rgba(255, 128, 0, 1) 100%)",
|
||||
"linear-gradient(120deg, rgba(91, 39, 255, 1) 0%, rgba(0, 212, 255, 1) 100%)"
|
||||
],
|
||||
|
||||
pageColor: "#ee7752",
|
||||
commentPageColor: "#23d5ab",
|
||||
userId: 1,
|
||||
source: 0,
|
||||
|
||||
emojiList: ['衰', '鄙视', '再见', '捂嘴', '摸鱼', '奋斗', '白眼', '可怜', '皱眉', '鼓掌', '烦恼', '吐舌', '挖鼻', '委屈', '滑稽', '啊这', '生气', '害羞', '晕', '好色', '流泪', '吐血', '微笑', '酷', '坏笑', '吓', '大兵', '哭笑', '困', '呲牙']
|
||||
}
|
||||
69
src/utils/letter.js
Normal file
69
src/utils/letter.js
Normal file
@ -0,0 +1,69 @@
|
||||
var aparted = false;
|
||||
|
||||
$("#open").click(function () {
|
||||
|
||||
if (!aparted) {
|
||||
var typed = new Typed('.letter', {
|
||||
strings: ["^1000Dear Ming",
|
||||
"M^200ing<br><br> 夜には^300いつも^200寒いよね、^600でも、^600手を^200繋いでいると、^600暖か^200くなるよ！<br> どんなに^300寒い夜も、^600君と^300二人でいれば、^600ちっとも^300寒くない！<br><br><p style='float:right; display:block; width:80px;'>^1000H^200ao</p>"],
|
||||
typeSpeed: 100,
|
||||
backSpeed: 50
|
||||
});
|
||||
|
||||
$('#open').find("span").eq(0).css('background-position', "0 -150px");
|
||||
|
||||
aparted = true;
|
||||
|
||||
var music = document.getElementById('music2');
|
||||
if (music.paused) {
|
||||
music.play();
|
||||
$('#music_btn2').css("opacity", "1");
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function playPause() {
|
||||
var music = document.getElementById('music2');
|
||||
var music_btn = $('#music_btn2');
|
||||
|
||||
if (music.paused) {
|
||||
music.play();
|
||||
music_btn.css("opacity", "1");
|
||||
} else {
|
||||
music.pause();
|
||||
music_btn.css("opacity", "0.2");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
window.onload = function () {
|
||||
|
||||
var currentUrl = window.location.href;
|
||||
var firstIndex = currentUrl.indexOf("#");
|
||||
if (firstIndex <= 0) window.location.href = currentUrl + "#contact";
|
||||
|
||||
$('#music2').attr('src', bgmsrc);
|
||||
|
||||
document.addEventListener('touchstart', function (event) {
|
||||
if (event.touches.length > 1) event.preventDefault();
|
||||
});
|
||||
|
||||
var lastTouchEnd = 0;
|
||||
|
||||
document.addEventListener('touchend', function (event) {
|
||||
|
||||
var now = (new Date()).getTime();
|
||||
if (now - lastTouchEnd <= 300) event.preventDefault();
|
||||
lastTouchEnd = now;
|
||||
|
||||
}, false);
|
||||
|
||||
document.addEventListener('gesturestart', function (event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$('body').css('opacity', '1');
|
||||
$('#jsi-cherry-container').css('z-index', '-99');
|
||||
|
||||
}
|
||||
336
src/utils/live2d.js
Normal file
336
src/utils/live2d.js
Normal file
@ -0,0 +1,336 @@
|
||||
/*
|
||||
* Live2D Widget
|
||||
* https://github.com/stevenjoezhang/live2d-widget
|
||||
*/
|
||||
|
||||
|
||||
import constant from "./constant";
|
||||
|
||||
|
||||
// 注意：live2d_path 参数应使用绝对路径
|
||||
const live2d_path = constant.live2d_path;
|
||||
|
||||
// 加载 waifu.css live2d.min.js
|
||||
if (screen.width > 768) {
|
||||
Promise.all([
|
||||
loadExternalResource(live2d_path + "waifu.css", "css"),
|
||||
loadExternalResource(live2d_path + "live2d.min.js", "js")
|
||||
]).then(() => {
|
||||
initWidget({
|
||||
waifuPath: constant.baseURL + constant.waifuPath,
|
||||
cdnPath: constant.cdnPath
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 封装异步加载资源的方法
|
||||
function loadExternalResource(url, type) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let tag;
|
||||
|
||||
if (type === "css") {
|
||||
tag = document.createElement("link");
|
||||
tag.rel = "stylesheet";
|
||||
tag.href = url;
|
||||
} else if (type === "js") {
|
||||
tag = document.createElement("script");
|
||||
tag.src = url;
|
||||
}
|
||||
|
||||
if (tag) {
|
||||
tag.onload = () => resolve(url);
|
||||
tag.onerror = () => reject(url);
|
||||
document.head.appendChild(tag);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initWidget(config) {
|
||||
document.body.insertAdjacentHTML("beforeend", `<div id="waifu-toggle">
|
||||
<span>看板娘</span>
|
||||
</div>`);
|
||||
const toggle = document.getElementById("waifu-toggle");
|
||||
toggle.addEventListener("click", () => {
|
||||
toggle.classList.remove("waifu-toggle-active");
|
||||
if (toggle.getAttribute("first-time")) {
|
||||
loadWidget(config);
|
||||
toggle.removeAttribute("first-time");
|
||||
} else {
|
||||
localStorage.removeItem("waifu-display");
|
||||
document.getElementById("waifu").style.display = "";
|
||||
setTimeout(() => {
|
||||
document.getElementById("waifu").style.bottom = 0;
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
if (localStorage.getItem("waifu-display") && Date.now() - localStorage.getItem("waifu-display") <= 86400000) {
|
||||
toggle.setAttribute("first-time", true);
|
||||
setTimeout(() => {
|
||||
toggle.classList.add("waifu-toggle-active");
|
||||
}, 0);
|
||||
} else {
|
||||
loadWidget(config);
|
||||
}
|
||||
}
|
||||
|
||||
function loadWidget(config) {
|
||||
// 配置路径
|
||||
let {waifuPath, cdnPath} = config;
|
||||
if (!cdnPath.endsWith("/")) cdnPath += "/";
|
||||
let modelList, idx = 0;
|
||||
|
||||
// 插入html
|
||||
localStorage.removeItem("waifu-display");
|
||||
localStorage.removeItem("waifu-text");
|
||||
document.body.insertAdjacentHTML("beforeend", `<div id="waifu">
|
||||
<div id="waifu-tips"></div>
|
||||
<canvas id="live2d" width="800" height="800"></canvas>
|
||||
<!-- 工具 -->
|
||||
<div id="waifu-tool">
|
||||
<span class="fa fa-lg fa-comment"></span>
|
||||
<span class="fa fa-lg fa-street-view"></span>
|
||||
<span class="fa fa-lg fa-mouse-pointer"></span>
|
||||
<span class="fa fa-lg fa-times"></span>
|
||||
</div>
|
||||
</div>`);
|
||||
setTimeout(() => {
|
||||
document.getElementById("waifu").style.bottom = 0;
|
||||
}, 0);
|
||||
|
||||
// 检测用户活动状态，并在空闲时显示消息
|
||||
let userAction = false,
|
||||
userActionTimer,
|
||||
messageTimer,
|
||||
messageArray = [
|
||||
"我是一个特别固执的人，我从来不会在意别人跟我说什么，让我去做，让我去怎么做，我不管。如果，你也可以像我一样，那我觉得，这件事情，太酷辣!!!",
|
||||
"我厉害，你给我大拇哥！",
|
||||
"那些说我们的网站土的人，说抄袭的人，说我们文章拉的人，说我吃饱了撑的人，你给我大拇哥！",
|
||||
"好久不见，日子过得好快呢……",
|
||||
"嘤嘤嘤～",
|
||||
"嗨～快来逗我玩吧！",
|
||||
"退、退、退",
|
||||
"很喜欢上班，有种上坟的感觉。",
|
||||
"很喜欢放假，有种刑满释放的感觉。",
|
||||
"很喜欢看评论，有一种批阅奏折的感觉。",
|
||||
"很喜欢发工资，有一种领低保的感觉。",
|
||||
"记得把我加入 Adblock 白名单哦！"
|
||||
];
|
||||
window.addEventListener("mousemove", () => userAction = true);
|
||||
window.addEventListener("keydown", () => userAction = true);
|
||||
setInterval(() => {
|
||||
if (userAction) {
|
||||
userAction = false;
|
||||
clearInterval(userActionTimer);
|
||||
userActionTimer = null;
|
||||
} else if (!userActionTimer) {
|
||||
userActionTimer = setInterval(() => {
|
||||
showMessage(randomSelection(messageArray), 6000, 9);
|
||||
}, 20000);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// 监听器
|
||||
(function registerEventListener() {
|
||||
document.querySelector("#waifu-tool .fa-comment").addEventListener("click", showHitokoto);
|
||||
document.querySelector("#waifu-tool .fa-street-view").addEventListener("click", loadRandModel);
|
||||
document.querySelector("#waifu-tool .fa-mouse-pointer").addEventListener("click", changeMouseAnimation);
|
||||
document.querySelector("#waifu-tool .fa-times").addEventListener("click", () => {
|
||||
localStorage.setItem("waifu-display", Date.now());
|
||||
showMessage("愿你有一天能与重要的人重逢。", 2000, 11);
|
||||
document.getElementById("waifu").style.bottom = "-500px";
|
||||
setTimeout(() => {
|
||||
document.getElementById("waifu").style.display = "none";
|
||||
document.getElementById("waifu-toggle").classList.add("waifu-toggle-active");
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
const devtools = () => {
|
||||
};
|
||||
console.log("%c", devtools);
|
||||
devtools.toString = () => {
|
||||
showMessage("哈哈，你打开了控制台，是想要看看我的小秘密吗？", 6000, 9);
|
||||
};
|
||||
window.addEventListener("copy", () => {
|
||||
showMessage("你都复制了些什么呀，转载要记得加上出处哦！", 6000, 9);
|
||||
});
|
||||
window.addEventListener("visibilitychange", () => {
|
||||
if (!document.hidden) showMessage("哇，你终于回来了～", 6000, 9);
|
||||
});
|
||||
|
||||
localStorage.setItem("showMouseAnimation", "1");
|
||||
document.querySelector("body").addEventListener("click", mouseAnimation);
|
||||
})();
|
||||
|
||||
// 欢迎页
|
||||
(function welcomeMessage() {
|
||||
let text;
|
||||
if (location.pathname === "/") { // 如果是主页
|
||||
const now = new Date().getHours();
|
||||
if (now > 5 && now <= 7) text = "早上好！一日之计在于晨，美好的一天就要开始了。";
|
||||
else if (now > 7 && now <= 11) text = "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！";
|
||||
else if (now > 11 && now <= 13) text = "中午了，工作了一个上午，现在是午餐时间！";
|
||||
else if (now > 13 && now <= 17) text = "午后很容易犯困呢，今天的运动目标完成了吗？";
|
||||
else if (now > 17 && now <= 19) text = "傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红～";
|
||||
else if (now > 19 && now <= 21) text = "晚上好，今天过得怎么样？";
|
||||
else if (now > 21 && now <= 23) text = ["已经这么晚了呀，早点休息吧，晚安～", "深夜时要爱护眼睛呀！"];
|
||||
else text = "你是夜猫子呀？这么晚还不睡觉，明天起的来嘛？";
|
||||
} else if (document.referrer !== "") {
|
||||
const referrer = new URL(document.referrer),
|
||||
domain = referrer.hostname.split(".")[1];
|
||||
if (location.hostname === referrer.hostname) text = `欢迎阅读<span>「${document.title.split(" - ")[0]}」</span>`;
|
||||
else if (domain === "baidu") text = `Hello！来自 百度搜索 的朋友<br>你是搜索 <span>${referrer.search.split("&wd=")[1].split("&")[0]}</span> 找到的我吗？`;
|
||||
else if (domain === "so") text = `Hello！来自 360搜索 的朋友<br>你是搜索 <span>${referrer.search.split("&q=")[1].split("&")[0]}</span> 找到的我吗？`;
|
||||
else if (domain === "google") text = `Hello！来自 谷歌搜索 的朋友<br>欢迎阅读<span>「${document.title.split(" - ")[0]}」</span>`;
|
||||
else text = `Hello！来自 <span>${referrer.hostname}</span> 的朋友`;
|
||||
} else {
|
||||
text = `欢迎阅读<span>「${document.title.split(" - ")[0]}」</span>`;
|
||||
}
|
||||
showMessage(text, 7000, 8);
|
||||
})();
|
||||
|
||||
// 初始化模型
|
||||
(function initModel() {
|
||||
let modelId = localStorage.getItem("modelId");
|
||||
if (modelId === null) {
|
||||
// 首次访问加载 指定模型 的 指定材质
|
||||
modelId = 5; // 模型 ID
|
||||
}
|
||||
loadModel(modelId);
|
||||
fetch(waifuPath)
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
window.addEventListener("mouseover", event => {
|
||||
for (let {selector, text} of result.mouseover) {
|
||||
if (!event.target.matches(selector)) continue;
|
||||
text = randomSelection(text);
|
||||
text = text.replace("{text}", event.target.innerText);
|
||||
showMessage(text, 4000, 8);
|
||||
return;
|
||||
}
|
||||
});
|
||||
window.addEventListener("click", event => {
|
||||
for (let {selector, text} of result.click) {
|
||||
if (!event.target.matches(selector)) continue;
|
||||
text = randomSelection(text);
|
||||
text = text.replace("{text}", event.target.innerText);
|
||||
showMessage(text, 4000, 8);
|
||||
return;
|
||||
}
|
||||
});
|
||||
result.seasons.forEach(({date, text}) => {
|
||||
const now = new Date(),
|
||||
after = date.split("-")[0],
|
||||
before = date.split("-")[1] || after;
|
||||
if ((after.split("/")[0] <= now.getMonth() + 1 && now.getMonth() + 1 <= before.split("/")[0]) && (after.split("/")[1] <= now.getDate() && now.getDate() <= before.split("/")[1])) {
|
||||
text = randomSelection(text);
|
||||
text = text.replace("{year}", now.getFullYear());
|
||||
messageArray.push(text);
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
// 模型集合
|
||||
async function loadModelList() {
|
||||
const response = await fetch(`${cdnPath}model_list.json`);
|
||||
modelList = await response.json();
|
||||
}
|
||||
|
||||
// 载入模型
|
||||
async function loadModel(modelId, message) {
|
||||
localStorage.setItem("modelId", modelId);
|
||||
showMessage(message, 4000, 10);
|
||||
if (!modelList) await loadModelList();
|
||||
// const target = randomSelection(modelList.models[modelId]);
|
||||
const target = "HyperdimensionNeptunia/blanc_swimwear";
|
||||
loadlive2d("live2d", `${cdnPath}model/${target}/index.json`);
|
||||
}
|
||||
|
||||
// 换肤
|
||||
async function loadRandModel() {
|
||||
const modelId = localStorage.getItem("modelId");
|
||||
if (!modelList) await loadModelList();
|
||||
const target = randomSelection(modelList.models[modelId]);
|
||||
loadlive2d("live2d", `${cdnPath}model/${target}/index.json`);
|
||||
showMessage("我的新衣服好看嘛？", 4000, 10);
|
||||
}
|
||||
|
||||
// 换人
|
||||
async function loadOtherModel() {
|
||||
let modelId = localStorage.getItem("modelId");
|
||||
if (!modelList) await loadModelList();
|
||||
const index = (++modelId >= modelList.models.length) ? 0 : modelId;
|
||||
loadModel(index, modelList.messages[index]);
|
||||
}
|
||||
|
||||
// 转换鼠标动画
|
||||
function changeMouseAnimation() {
|
||||
if (localStorage.getItem("showMouseAnimation") === "0") {
|
||||
localStorage.setItem("showMouseAnimation", "1");
|
||||
document.querySelector("body").addEventListener("click", mouseAnimation);
|
||||
showMessage("哈哈，要牢记社会主义核心价值观哦！", 6000, 9);
|
||||
} else {
|
||||
localStorage.setItem("showMouseAnimation", "0");
|
||||
document.querySelector("body").removeEventListener("click", mouseAnimation);
|
||||
showMessage("今天你爱国了吗？", 6000, 9);
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标动画
|
||||
function mouseAnimation(e) {
|
||||
let list = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
|
||||
let span = $("<span>").text(list[idx]);
|
||||
idx = (idx + 1) % list.length;
|
||||
let x = e.pageX, y = e.pageY;
|
||||
span.css({
|
||||
"z-index": 1000,
|
||||
"top": y - 20,
|
||||
"left": x,
|
||||
"position": "absolute",
|
||||
"pointer-events": "none",
|
||||
"font-weight": "bold",
|
||||
"color": "#ff6651"
|
||||
});
|
||||
$("body").append(span);
|
||||
span.animate({"top": y - 180, "opacity": 0}, 1500, function () {
|
||||
span.remove();
|
||||
});
|
||||
}
|
||||
|
||||
// 随机选择
|
||||
function randomSelection(obj) {
|
||||
return Array.isArray(obj) ? obj[Math.floor(Math.random() * obj.length)] : obj;
|
||||
}
|
||||
|
||||
// 随机词
|
||||
function showHitokoto() {
|
||||
// 增加 hitokoto.cn 的 API
|
||||
fetch(constant.hitokoto)
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
const text = `这句一言来自 <span>「${result.from}」</span>，是 <span>${result.creator}</span> 在 hitokoto.cn 投稿的。`;
|
||||
showMessage(result.hitokoto, 6000, 9);
|
||||
setTimeout(() => {
|
||||
showMessage(text, 4000, 9);
|
||||
}, 6000);
|
||||
});
|
||||
}
|
||||
|
||||
// 显示消息
|
||||
function showMessage(text, timeout, priority) {
|
||||
if (!text || (localStorage.getItem("waifu-text") && localStorage.getItem("waifu-text") > priority)) return;
|
||||
if (messageTimer) {
|
||||
clearTimeout(messageTimer);
|
||||
messageTimer = null;
|
||||
}
|
||||
text = randomSelection(text);
|
||||
localStorage.setItem("waifu-text", priority);
|
||||
const tips = document.getElementById("waifu-tips");
|
||||
tips.innerHTML = text;
|
||||
tips.classList.add("waifu-tips-active");
|
||||
messageTimer = setTimeout(() => {
|
||||
localStorage.removeItem("waifu-text");
|
||||
tips.classList.remove("waifu-tips-active");
|
||||
}, timeout);
|
||||
}
|
||||
}
|
||||
133
src/utils/mousedown.js
Normal file
133
src/utils/mousedown.js
Normal file
@ -0,0 +1,133 @@
|
||||
export default function () {
|
||||
// 动画效果
|
||||
var canvasEl = document.querySelector("#mousedown");
|
||||
if (canvasEl) {
|
||||
var ctx = canvasEl.getContext("2d", {willReadFrequently: true})
|
||||
, numberOfParticules = 30
|
||||
, pointerX = 0
|
||||
, pointerY = 0
|
||||
, tap = "mousedown"
|
||||
, colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"]
|
||||
, setCanvasSize = debounce(function () {
|
||||
canvasEl.width = 2 * window.innerWidth,
|
||||
canvasEl.height = 2 * window.innerHeight,
|
||||
canvasEl.style.width = window.innerWidth + "px",
|
||||
canvasEl.style.height = window.innerHeight + "px",
|
||||
canvasEl.getContext("2d", {willReadFrequently: true}).scale(2, 2)
|
||||
}, 500)
|
||||
, render = anime({
|
||||
duration: 1 / 0,
|
||||
update: function () {
|
||||
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
|
||||
}
|
||||
});
|
||||
document.addEventListener(tap, function (e) {
|
||||
"sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(),
|
||||
updateCoords(e),
|
||||
animateParticules(pointerX, pointerY))
|
||||
}, !1),
|
||||
setCanvasSize(),
|
||||
window.addEventListener("resize", setCanvasSize, !1)
|
||||
}
|
||||
|
||||
function updateCoords(e) {
|
||||
pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left,
|
||||
pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
|
||||
}
|
||||
|
||||
function setParticuleDirection(e) {
|
||||
var t = anime.random(0, 360) * Math.PI / 180
|
||||
, a = anime.random(50, 180)
|
||||
, n = [-1, 1][anime.random(0, 1)] * a;
|
||||
return {
|
||||
x: e.x + n * Math.cos(t),
|
||||
y: e.y + n * Math.sin(t)
|
||||
}
|
||||
}
|
||||
|
||||
function createParticule(e, t) {
|
||||
var a = {};
|
||||
return a.x = e,
|
||||
a.y = t,
|
||||
a.color = colors[anime.random(0, colors.length - 1)],
|
||||
a.radius = anime.random(16, 32),
|
||||
a.endPos = setParticuleDirection(a),
|
||||
a.draw = function () {
|
||||
ctx.beginPath(),
|
||||
ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0),
|
||||
ctx.fillStyle = a.color,
|
||||
ctx.fill()
|
||||
}
|
||||
,
|
||||
a
|
||||
}
|
||||
|
||||
function createCircle(e, t) {
|
||||
var a = {};
|
||||
return a.x = e,
|
||||
a.y = t,
|
||||
a.color = "#F00",
|
||||
a.radius = .1,
|
||||
a.alpha = .5,
|
||||
a.lineWidth = 6,
|
||||
a.draw = function () {
|
||||
ctx.globalAlpha = a.alpha,
|
||||
ctx.beginPath(),
|
||||
ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0),
|
||||
ctx.lineWidth = a.lineWidth,
|
||||
ctx.strokeStyle = a.color,
|
||||
ctx.stroke(),
|
||||
ctx.globalAlpha = 1
|
||||
}
|
||||
,
|
||||
a
|
||||
}
|
||||
|
||||
function renderParticule(e) {
|
||||
for (var t = 0; t < e.animatables.length; t++)
|
||||
e.animatables[t].target.draw()
|
||||
}
|
||||
|
||||
function animateParticules(e, t) {
|
||||
for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++)
|
||||
n.push(createParticule(e, t));
|
||||
anime.timeline().add({
|
||||
targets: n,
|
||||
x: function (e) {
|
||||
return e.endPos.x
|
||||
},
|
||||
y: function (e) {
|
||||
return e.endPos.y
|
||||
},
|
||||
radius: .1,
|
||||
duration: anime.random(1200, 1800),
|
||||
easing: "easeOutExpo",
|
||||
update: renderParticule
|
||||
}).add({
|
||||
targets: a,
|
||||
radius: anime.random(80, 160),
|
||||
lineWidth: 0,
|
||||
alpha: {
|
||||
value: 0,
|
||||
easing: "linear",
|
||||
duration: anime.random(600, 800)
|
||||
},
|
||||
duration: anime.random(1200, 1800),
|
||||
easing: "easeOutExpo",
|
||||
update: renderParticule,
|
||||
offset: 0
|
||||
})
|
||||
}
|
||||
|
||||
function debounce(fn, delay) {
|
||||
var timer
|
||||
return function () {
|
||||
var context = this
|
||||
var args = arguments
|
||||
clearTimeout(timer)
|
||||
timer = setTimeout(function () {
|
||||
fn.apply(context, args)
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
}
|
||||
140
src/utils/request.js
Normal file
140
src/utils/request.js
Normal file
@ -0,0 +1,140 @@
|
||||
import axios from "axios";
|
||||
import constant from "./constant";
|
||||
//处理url参数
|
||||
import qs from "qs";
|
||||
|
||||
import store from "../store";
|
||||
|
||||
|
||||
axios.defaults.baseURL = constant.baseURL;
|
||||
|
||||
|
||||
// 添加请求拦截器
|
||||
axios.interceptors.request.use(function (config) {
|
||||
// 在发送请求之前做些什么
|
||||
return config;
|
||||
}, function (error) {
|
||||
// 对请求错误做些什么
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
// 添加响应拦截器
|
||||
axios.interceptors.response.use(function (response) {
|
||||
if (response.data !== null && response.data.hasOwnProperty("code") && response.data.code !== 200) {
|
||||
if (response.data.code === 300) {
|
||||
store.commit("loadCurrentUser", {});
|
||||
localStorage.removeItem("userToken");
|
||||
store.commit("loadCurrentAdmin", {});
|
||||
localStorage.removeItem("adminToken");
|
||||
window.location.href = constant.webURL + "/user";
|
||||
}
|
||||
return Promise.reject(new Error(response.data.message));
|
||||
} else {
|
||||
return response;
|
||||
}
|
||||
}, function (error) {
|
||||
// 对响应错误做点什么
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
// 当data为URLSearchParams对象时设置为application/x-www-form-urlencoded;charset=utf-8
|
||||
// 当data为普通对象时，会被设置为application/json;charset=utf-8
|
||||
|
||||
|
||||
export default {
|
||||
post(url, params = {}, isAdmin = false, json = true) {
|
||||
let config;
|
||||
if (isAdmin) {
|
||||
config = {
|
||||
headers: {"Authorization": localStorage.getItem("adminToken")}
|
||||
};
|
||||
} else {
|
||||
config = {
|
||||
headers: {"Authorization": localStorage.getItem("userToken")}
|
||||
};
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios
|
||||
.post(url, json ? params : qs.stringify(params), config)
|
||||
.then(res => {
|
||||
resolve(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
get(url, params = {}, isAdmin = false) {
|
||||
let headers;
|
||||
if (isAdmin) {
|
||||
headers = {"Authorization": localStorage.getItem("adminToken")};
|
||||
} else {
|
||||
headers = {"Authorization": localStorage.getItem("userToken")};
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.get(url, {
|
||||
params: params,
|
||||
headers: headers
|
||||
}).then(res => {
|
||||
resolve(res.data);
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
upload(url, param, isAdmin = false, option) {
|
||||
let config;
|
||||
if (isAdmin) {
|
||||
config = {
|
||||
headers: {"Authorization": localStorage.getItem("adminToken"), "Content-Type": "multipart/form-data"},
|
||||
timeout: 60000
|
||||
};
|
||||
} else {
|
||||
config = {
|
||||
headers: {"Authorization": localStorage.getItem("userToken"), "Content-Type": "multipart/form-data"},
|
||||
timeout: 60000
|
||||
};
|
||||
}
|
||||
if (typeof option !== "undefined") {
|
||||
config.onUploadProgress = progressEvent => {
|
||||
if (progressEvent.total > 0) {
|
||||
progressEvent.percent = progressEvent.loaded / progressEvent.total * 100;
|
||||
}
|
||||
option.onProgress(progressEvent);
|
||||
};
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios
|
||||
.post(url, param, config)
|
||||
.then(res => {
|
||||
resolve(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
uploadQiniu(url, param) {
|
||||
let config = {
|
||||
headers: {"Content-Type": "multipart/form-data"},
|
||||
timeout: 60000
|
||||
};
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios
|
||||
.post(url, param, config)
|
||||
.then(res => {
|
||||
resolve(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
132
src/utils/sakura.js
Normal file
132
src/utils/sakura.js
Normal file
File diff suppressed because one or more lines are too long
6
src/utils/title.js
Normal file
6
src/utils/title.js
Normal file
@ -0,0 +1,6 @@
|
||||
let titleTime, OriginTitile = document.title;
|
||||
document.addEventListener("visibilitychange", (function () {
|
||||
document.hidden ? (document.title = "w(ﾟДﾟ)w 不要走！再看看嘛！", clearTimeout(titleTime)) : (document.title = "♪(^∇^*)欢迎肥来！", titleTime = setTimeout((function () {
|
||||
document.title = OriginTitile
|
||||
}), 2e3))
|
||||
}));
|
||||
710
src/utils/twopeople.js
Normal file
710
src/utils/twopeople.js
Normal file
@ -0,0 +1,710 @@
|
||||
// <canvas class="illo" style="max-width: 250px;max-height: 250px;touch-action: none"></canvas>
|
||||
|
||||
// Made with Zdog
|
||||
var BokehShape = Zdog.Shape.subclass({
|
||||
bokehSize: 5,
|
||||
bokehLimit: 64
|
||||
});
|
||||
BokehShape.prototype.updateBokeh = function () {
|
||||
// bokeh 0 -> 1
|
||||
this.bokeh = Math.abs(this.sortValue) / this.bokehLimit;
|
||||
this.bokeh = Math.max(0, Math.min(1, this.bokeh));
|
||||
return this.bokeh;
|
||||
};
|
||||
BokehShape.prototype.getLineWidth = function () {
|
||||
return this.stroke + this.bokehSize * this.bokeh * this.bokeh;
|
||||
};
|
||||
BokehShape.prototype.getBokehAlpha = function () {
|
||||
var alpha = 1 - this.bokeh;
|
||||
alpha *= alpha;
|
||||
return alpha * 0.8 + 0.2;
|
||||
};
|
||||
BokehShape.prototype.renderCanvasDot = function (ctx) {
|
||||
this.updateBokeh();
|
||||
ctx.globalAlpha = this.getBokehAlpha(); // set opacity
|
||||
Zdog.Shape.prototype.renderCanvasDot.apply(this, arguments);
|
||||
ctx.globalAlpha = 1; // reset
|
||||
};
|
||||
BokehShape.prototype.renderPath = function (ctx, renderer) {
|
||||
this.updateBokeh();
|
||||
// set opacity
|
||||
if (renderer.isCanvas) {
|
||||
ctx.globalAlpha = this.getBokehAlpha();
|
||||
}
|
||||
Zdog.Shape.prototype.renderPath.apply(this, arguments);
|
||||
// reset opacity
|
||||
if (renderer.isCanvas) {
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
};
|
||||
var TAU = Zdog.TAU;
|
||||
|
||||
function makeMadeline(isGood, colors, options) {
|
||||
var rotor = new Zdog.Anchor(options);
|
||||
var body = new Zdog.Group({
|
||||
addTo: rotor,
|
||||
rotate: {x: -TAU / 8},
|
||||
translate: {z: -48},
|
||||
updateSort: true
|
||||
});
|
||||
var head = new Zdog.Anchor({
|
||||
addTo: body,
|
||||
translate: {y: -11, z: -2},
|
||||
rotate: {x: TAU / 8}
|
||||
});
|
||||
// face
|
||||
var face = new Zdog.Ellipse({
|
||||
diameter: 6,
|
||||
addTo: head,
|
||||
translate: {z: 4},
|
||||
stroke: 8,
|
||||
color: colors.skin
|
||||
});
|
||||
var eyeGroup = new Zdog.Group({
|
||||
addTo: face,
|
||||
translate: {z: face.stroke / 2 - 0.5}
|
||||
});
|
||||
// eyes
|
||||
[-1, 1].forEach(function (xSide) {
|
||||
// cheek blush
|
||||
if (isGood) {
|
||||
new Zdog.Ellipse({
|
||||
width: 2,
|
||||
height: 1.3,
|
||||
addTo: eyeGroup,
|
||||
translate: {x: 4.5 * xSide, y: 3, z: -1},
|
||||
rotate: {y: -TAU / 16 * xSide},
|
||||
stroke: 1,
|
||||
color: '#FA8',
|
||||
fill: true
|
||||
});
|
||||
}
|
||||
var eyeX = 3.5 * xSide;
|
||||
// eye
|
||||
new Zdog.Ellipse({
|
||||
width: 0.75,
|
||||
height: 1.5,
|
||||
addTo: eyeGroup,
|
||||
color: colors.eye,
|
||||
translate: {x: eyeX},
|
||||
stroke: 2,
|
||||
fill: true
|
||||
});
|
||||
// eye brow
|
||||
new Zdog.Ellipse({
|
||||
addTo: eyeGroup,
|
||||
height: 3,
|
||||
width: 1.2,
|
||||
quarters: 2,
|
||||
translate: {x: eyeX, y: -3},
|
||||
rotate: {z: -TAU / 4 + 0.15 * xSide * (isGood ? 1 : -1)},
|
||||
color: colors.hair,
|
||||
stroke: 1,
|
||||
fill: false,
|
||||
closed: true
|
||||
});
|
||||
});
|
||||
// hair ball
|
||||
new Zdog.Shape({
|
||||
path: [
|
||||
{x: -1},
|
||||
{x: 1},
|
||||
{z: -4}],
|
||||
addTo: head,
|
||||
translate: {y: -4, z: -1},
|
||||
stroke: 18,
|
||||
color: colors.hair
|
||||
});
|
||||
var bang = new Zdog.Shape({
|
||||
path: [
|
||||
{},
|
||||
{
|
||||
arc: [
|
||||
{z: 4, y: 4},
|
||||
{z: 0, y: 8}]
|
||||
}],
|
||||
addTo: head,
|
||||
translate: {x: 2, y: -7.5, z: 6},
|
||||
rotate: {x: 0.5, z: -0.5},
|
||||
stroke: 4,
|
||||
color: colors.hair,
|
||||
closed: false
|
||||
});
|
||||
bang.copy({
|
||||
translate: {x: 5, y: -6, z: 5},
|
||||
rotate: {x: -0.3, z: -0.5}
|
||||
});
|
||||
bang.copy({
|
||||
translate: {x: 5, y: -6, z: 3},
|
||||
rotate: {y: -0.7, z: -1}
|
||||
});
|
||||
// left side
|
||||
bang.copy({
|
||||
translate: {x: -2, y: -7.5, z: 6},
|
||||
rotate: {x: 0, z: TAU / 16 * 6}
|
||||
});
|
||||
bang.copy({
|
||||
translate: {x: -5, y: -6, z: 5},
|
||||
rotate: {x: 0, z: TAU / 4}
|
||||
});
|
||||
bang.copy({
|
||||
translate: {x: -5, y: -6, z: 3},
|
||||
rotate: {y: 0.7, z: 1}
|
||||
});
|
||||
// hair cover
|
||||
new Zdog.Shape({
|
||||
path: [
|
||||
{x: -3},
|
||||
{x: 3}],
|
||||
addTo: head,
|
||||
stroke: 7,
|
||||
translate: {y: -8, z: 5},
|
||||
color: colors.hair
|
||||
});
|
||||
// trail locks
|
||||
var trailLock = new Zdog.Shape({
|
||||
path: [
|
||||
{y: -4, z: 0},
|
||||
{
|
||||
bezier: [
|
||||
{y: -10, z: -14},
|
||||
{y: 0, z: -16},
|
||||
{y: 0, z: -26}]
|
||||
}],
|
||||
addTo: head,
|
||||
translate: {z: -4, y: 0},
|
||||
stroke: 10,
|
||||
color: colors.hair,
|
||||
closed: false
|
||||
});
|
||||
trailLock.copy({
|
||||
translate: {x: -3, z: -4},
|
||||
rotate: {z: -TAU / 8},
|
||||
stroke: 8
|
||||
});
|
||||
trailLock.copy({
|
||||
translate: {x: 3, z: -4},
|
||||
rotate: {z: TAU / 8},
|
||||
stroke: 8
|
||||
});
|
||||
trailLock.copy({
|
||||
translate: {y: 2},
|
||||
// rotate: { z: TAU/2 },
|
||||
scale: {y: 0.5},
|
||||
stroke: 8
|
||||
});
|
||||
// ----- torso ----- //
|
||||
|
||||
// 2nd rib
|
||||
var torsoRib = new Zdog.Ellipse({
|
||||
width: 12,
|
||||
height: 10,
|
||||
addTo: body,
|
||||
rotate: {x: -TAU / 4},
|
||||
translate: {y: -1},
|
||||
stroke: 6,
|
||||
color: colors.parkaLight,
|
||||
fill: true
|
||||
});
|
||||
|
||||
// neck rib
|
||||
torsoRib.copy({
|
||||
width: 6,
|
||||
height: 6,
|
||||
translate: {y: -5}
|
||||
});
|
||||
|
||||
// 3rd rib
|
||||
torsoRib.copy({
|
||||
translate: {y: 3}
|
||||
});
|
||||
|
||||
// 4th rib
|
||||
torsoRib.copy({
|
||||
translate: {y: 7},
|
||||
color: colors.parkaDark
|
||||
});
|
||||
|
||||
// waist
|
||||
new Zdog.Ellipse({
|
||||
width: 10,
|
||||
height: 8,
|
||||
addTo: body,
|
||||
rotate: {x: -TAU / 4},
|
||||
translate: {y: 11},
|
||||
stroke: 4,
|
||||
color: colors.tight,
|
||||
fill: true
|
||||
});
|
||||
|
||||
|
||||
// arms
|
||||
[-1, 1].forEach(function (xSide) {
|
||||
var isLeft = xSide == 1;
|
||||
// shoulder ball
|
||||
new Zdog.Shape({
|
||||
addTo: body,
|
||||
stroke: 6,
|
||||
translate: {x: 6 * xSide, y: -5, z: -1},
|
||||
color: colors.parkaLight
|
||||
});
|
||||
|
||||
|
||||
var shoulderJoint = new Zdog.Anchor({
|
||||
addTo: body,
|
||||
translate: {x: 9 * xSide, y: -3, z: -2},
|
||||
rotate: isLeft ? {x: TAU / 8 * 3, z: -TAU / 32} : {z: TAU / 16 * 2, x: -TAU / 16 * 2}
|
||||
});
|
||||
|
||||
|
||||
// top shoulder rib
|
||||
var armRib = new Zdog.Ellipse({
|
||||
diameter: 2,
|
||||
rotate: {x: -TAU / 4},
|
||||
addTo: shoulderJoint,
|
||||
translate: {x: 0 * xSide},
|
||||
stroke: 6,
|
||||
color: colors.parkaLight,
|
||||
fill: true
|
||||
});
|
||||
|
||||
armRib.copy({
|
||||
translate: {y: 4}
|
||||
});
|
||||
|
||||
|
||||
var elbowJoint = new Zdog.Anchor({
|
||||
addTo: shoulderJoint,
|
||||
translate: {y: 8},
|
||||
rotate: isLeft ? {} : {z: TAU / 8}
|
||||
});
|
||||
|
||||
|
||||
armRib.copy({
|
||||
addTo: elbowJoint,
|
||||
translate: {x: 0, y: 0}
|
||||
});
|
||||
|
||||
armRib.copy({
|
||||
addTo: elbowJoint,
|
||||
translate: {y: 4},
|
||||
color: colors.parkaDark
|
||||
});
|
||||
|
||||
|
||||
// hand
|
||||
new Zdog.Shape({
|
||||
addTo: elbowJoint,
|
||||
translate: {y: 9, z: -1},
|
||||
stroke: 8,
|
||||
color: colors.skin
|
||||
});
|
||||
|
||||
|
||||
// ----- legs ----- //
|
||||
var knee = {y: 7};
|
||||
var thigh = new Zdog.Shape({
|
||||
path: [{y: 0}, knee],
|
||||
addTo: body,
|
||||
translate: {x: 4 * xSide, y: 13},
|
||||
rotate: isLeft ? {} : {x: TAU / 16 * 3, z: TAU / 16},
|
||||
stroke: 8,
|
||||
color: colors.tight
|
||||
});
|
||||
|
||||
|
||||
var shin = new Zdog.Shape({
|
||||
path: [{y: 0}, {y: 8}],
|
||||
addTo: thigh,
|
||||
stroke: 6,
|
||||
translate: knee,
|
||||
rotate: isLeft ? {} : {x: -TAU / 16 * 5},
|
||||
color: colors.tight
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
// butt
|
||||
new Zdog.Shape({
|
||||
path: [
|
||||
{x: -3},
|
||||
{x: 3}],
|
||||
|
||||
visible: false,
|
||||
addTo: body,
|
||||
translate: {y: 11, z: -2},
|
||||
stroke: 8,
|
||||
color: colors.tight
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
window.makeBird = function (options) {
|
||||
|
||||
var spin = options.spin || 0;
|
||||
|
||||
var arrow = new Zdog.Anchor({
|
||||
addTo: options.addTo,
|
||||
scale: 2 / 3,
|
||||
rotate: {z: spin}
|
||||
});
|
||||
|
||||
|
||||
var bird = new Zdog.Group({
|
||||
addTo: arrow,
|
||||
translate: {x: 87},
|
||||
rotate: {x: -spin}
|
||||
});
|
||||
|
||||
|
||||
// bird body
|
||||
new Zdog.Shape({
|
||||
path: [
|
||||
{x: -3, y: 0},
|
||||
{
|
||||
arc: [
|
||||
{x: -2, y: 1.5},
|
||||
{x: 0, y: 1.5}]
|
||||
},
|
||||
|
||||
{
|
||||
arc: [
|
||||
{x: 2, y: 1.5},
|
||||
{x: 2, y: 0}]
|
||||
}],
|
||||
|
||||
|
||||
addTo: bird,
|
||||
translate: {x: 0.5},
|
||||
stroke: 3,
|
||||
color: options.color,
|
||||
fill: true
|
||||
});
|
||||
|
||||
|
||||
// bird head
|
||||
new Zdog.Shape({
|
||||
translate: {x: 4, y: -1},
|
||||
addTo: bird,
|
||||
stroke: 4,
|
||||
color: options.color
|
||||
});
|
||||
|
||||
|
||||
// beak
|
||||
new Zdog.Shape({
|
||||
path: [
|
||||
{x: 0, y: -1},
|
||||
{x: 3, y: 0},
|
||||
{x: 0, y: 1}],
|
||||
|
||||
addTo: bird,
|
||||
translate: {x: 5, y: -1},
|
||||
stroke: 1,
|
||||
color: options.color,
|
||||
fill: true
|
||||
});
|
||||
|
||||
|
||||
// tail feather
|
||||
new Zdog.Shape({
|
||||
path: [
|
||||
{x: -3, z: -2},
|
||||
{x: 0, z: 0},
|
||||
{x: -3, z: 2}],
|
||||
|
||||
addTo: bird,
|
||||
translate: {x: -4, y: 0},
|
||||
stroke: 2,
|
||||
color: options.color,
|
||||
fill: true
|
||||
});
|
||||
|
||||
|
||||
var wing = new Zdog.Shape({
|
||||
path: [
|
||||
{x: 3, y: 0},
|
||||
{x: -1, y: -9},
|
||||
{
|
||||
arc: [
|
||||
{x: -5, y: -4},
|
||||
{x: -3, y: 0}]
|
||||
}],
|
||||
|
||||
|
||||
addTo: bird,
|
||||
translate: {z: -1.5},
|
||||
rotate: {x: TAU / 8},
|
||||
stroke: 1,
|
||||
color: options.color,
|
||||
fill: true
|
||||
});
|
||||
|
||||
|
||||
wing.copy({
|
||||
translate: {z: 1.5},
|
||||
scale: {z: -1},
|
||||
rotate: {x: -TAU / 8}
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
// -------------------------- demo -------------------------- //
|
||||
|
||||
var illoElem = document.querySelector('.illo');
|
||||
var w = 160;
|
||||
var h = 160;
|
||||
var minWindowSize = Math.min(window.innerWidth, window.innerHeight);
|
||||
var zoom = Math.min(5, Math.floor(minWindowSize / w));
|
||||
illoElem.setAttribute('width', w * zoom);
|
||||
illoElem.setAttribute('height', h * zoom);
|
||||
|
||||
var isSpinning = true;
|
||||
var TAU = Zdog.TAU;
|
||||
|
||||
var illo = new Zdog.Illustration({
|
||||
element: illoElem,
|
||||
zoom: zoom,
|
||||
rotate: {y: -TAU / 4},
|
||||
dragRotate: true,
|
||||
onDragStart: function () {
|
||||
isSpinning = false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var madColor = {
|
||||
skin: '#FD9',
|
||||
hair: '#D53',
|
||||
parkaLight: '#67F',
|
||||
parkaDark: '#35D',
|
||||
tight: '#742',
|
||||
eye: '#333'
|
||||
};
|
||||
|
||||
var badColor = {
|
||||
skin: '#EBC',
|
||||
hair: '#D4B',
|
||||
parkaLight: '#85A',
|
||||
parkaDark: '#527',
|
||||
tight: '#412',
|
||||
eye: '#D02'
|
||||
};
|
||||
|
||||
|
||||
var glow = 'hsla(60, 100%, 80%, 0.3)';
|
||||
var featherGold = '#FE5';
|
||||
|
||||
// -- illustration shapes --- //
|
||||
|
||||
makeMadeline(true, madColor, {
|
||||
addTo: illo
|
||||
});
|
||||
|
||||
makeMadeline(false, badColor, {
|
||||
addTo: illo,
|
||||
rotate: {y: TAU / 2}
|
||||
});
|
||||
|
||||
|
||||
// ----- feather ----- //
|
||||
|
||||
var feather = new Zdog.Group({
|
||||
addTo: illo,
|
||||
rotate: {y: -TAU / 4}
|
||||
});
|
||||
|
||||
|
||||
(function () {
|
||||
|
||||
var featherPartCount = 8;
|
||||
var radius = 12;
|
||||
var angleX = TAU / featherPartCount / 2;
|
||||
var sector = TAU * radius / 2 / featherPartCount;
|
||||
|
||||
for (var i = 0; i < featherPartCount; i++) {
|
||||
var curve = Math.cos(i / featherPartCount * TAU * 3 / 4 + TAU * 1 / 4);
|
||||
var x = 4 - curve * 2;
|
||||
var y0 = sector / 2;
|
||||
// var y2 = -sector/2;
|
||||
var isLast = i == featherPartCount - 1;
|
||||
var y3 = isLast ? sector * -1 : -y0;
|
||||
var z1 = -radius + 2 + curve * -1.5;
|
||||
var z2 = isLast ? -radius : -radius;
|
||||
var barb = new Zdog.Shape({
|
||||
path: [
|
||||
{x: 0, y: y0, z: -radius},
|
||||
{x: x, y: -sector / 2, z: z1},
|
||||
{x: x, y: -sector * 3 / 4, z: z1},
|
||||
{x: 0, y: y3, z: z2}],
|
||||
|
||||
addTo: feather,
|
||||
rotate: {x: angleX * -i + TAU / 8},
|
||||
stroke: 1,
|
||||
color: featherGold,
|
||||
fill: true
|
||||
});
|
||||
|
||||
barb.copy({
|
||||
scale: {x: -1}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// rachis
|
||||
var rachis = new Zdog.Ellipse({
|
||||
addTo: feather,
|
||||
diameter: radius * 2,
|
||||
quarters: 2,
|
||||
rotate: {y: -TAU / 4},
|
||||
stroke: 2,
|
||||
color: featherGold
|
||||
});
|
||||
|
||||
rachis.copy({
|
||||
stroke: 8,
|
||||
color: glow,
|
||||
rotate: {y: -TAU / 4, x: -0.5}
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
// ----- rods ----- //
|
||||
|
||||
(function () {
|
||||
|
||||
var rodCount = 14;
|
||||
for (var i = 0; i < rodCount; i++) {
|
||||
var zRotor = new Zdog.Anchor({
|
||||
addTo: illo,
|
||||
rotate: {z: TAU / rodCount * i}
|
||||
});
|
||||
|
||||
|
||||
var y0 = 32;
|
||||
var y1 = y0 + 2 + Math.random() * 24;
|
||||
new BokehShape({
|
||||
path: [
|
||||
{y: y0},
|
||||
{y: y1}],
|
||||
|
||||
addTo: zRotor,
|
||||
rotate: {x: (Math.random() * 2 - 1) * TAU / 8},
|
||||
color: madColor.skin,
|
||||
stroke: 1,
|
||||
bokehSize: 6,
|
||||
bokehLimit: 70
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
// dots
|
||||
|
||||
(function () {
|
||||
var dotCount = 64;
|
||||
|
||||
for (var i = 0; i < dotCount; i++) {
|
||||
var yRotor = new Zdog.Anchor({
|
||||
addTo: illo,
|
||||
rotate: {y: TAU / dotCount * i}
|
||||
});
|
||||
|
||||
|
||||
new BokehShape({
|
||||
path: [
|
||||
{z: 40 * (1 - Math.random() * Math.random()) + 32}],
|
||||
|
||||
addTo: yRotor,
|
||||
rotate: {x: (Math.random() * 2 - 1) * TAU * 3 / 16},
|
||||
color: badColor.skin,
|
||||
stroke: 1 + Math.random(),
|
||||
bokehSize: 6,
|
||||
bokehLimit: 74
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
// ----- birds ----- //
|
||||
|
||||
var birdRotor = new Zdog.Anchor({
|
||||
addTo: illo,
|
||||
rotate: {y: TAU * -1 / 8}
|
||||
});
|
||||
|
||||
|
||||
makeBird({
|
||||
addTo: birdRotor,
|
||||
color: madColor.parkaLight,
|
||||
spin: TAU / 2
|
||||
});
|
||||
|
||||
|
||||
makeBird({
|
||||
addTo: birdRotor,
|
||||
color: featherGold,
|
||||
spin: -TAU * 3 / 8
|
||||
});
|
||||
|
||||
|
||||
makeBird({
|
||||
addTo: birdRotor,
|
||||
color: 'white',
|
||||
spin: -TAU / 4
|
||||
});
|
||||
|
||||
|
||||
makeBird({
|
||||
addTo: birdRotor,
|
||||
color: madColor.hair,
|
||||
spin: -TAU / 8
|
||||
});
|
||||
|
||||
|
||||
makeBird({
|
||||
addTo: birdRotor,
|
||||
color: madColor.parkaDark,
|
||||
spin: TAU / 8
|
||||
});
|
||||
|
||||
|
||||
// -- animate --- //
|
||||
|
||||
var isSpinning = true;
|
||||
var rotateSpeed = -TAU / 60;
|
||||
var xClock = 0;
|
||||
var then = new Date() - 1 / 60;
|
||||
|
||||
function animate() {
|
||||
update();
|
||||
illo.renderGraph();
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
// -- update -- //
|
||||
|
||||
function update() {
|
||||
var now = new Date();
|
||||
var delta = now - then;
|
||||
// auto rotate
|
||||
if (isSpinning) {
|
||||
var theta = rotateSpeed / 60 * delta * -1;
|
||||
illo.rotate.y += theta;
|
||||
xClock += theta / 4;
|
||||
illo.rotate.x = Math.sin(xClock) * TAU / 12;
|
||||
}
|
||||
|
||||
illo.updateGraph();
|
||||
|
||||
then = now;
|
||||
}
|
||||
|
||||
//# sourceURL=pen.js
|
||||
2236
src/utils/zdog.js
Normal file
2236
src/utils/zdog.js
Normal file
File diff suppressed because it is too large
Load Diff
23
vue.config.js
Normal file
23
vue.config.js
Normal file
@ -0,0 +1,23 @@
|
||||
const CompressionPlugin = require('compression-webpack-plugin')
|
||||
|
||||
module.exports = {
|
||||
devServer: {
|
||||
port: 80,
|
||||
https: false,
|
||||
open: false
|
||||
},
|
||||
lintOnSave: false,
|
||||
productionSourceMap: false,
|
||||
configureWebpack: {
|
||||
plugins: [
|
||||
new CompressionPlugin({
|
||||
algorithm: 'gzip',
|
||||
test: /\.js$|\.html$|\.css$/,
|
||||
filename: '[path].gz[query]',
|
||||
minRatio: 1,
|
||||
threshold: 10240,
|
||||
deleteOriginalAssets: false
|
||||
})
|
||||
]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user